'Error on Validation for Address Contact and dropdown list
I have been trying to validate:
Contact = > Trying to create minimum and maximum number ( Right now the whole code seems like it's not working at all. Dropdown list = > Doesn't even work.
HTML Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="validation.js"></script>
</head>
<body onload="document.registration.fname.focus();">
<div class="container">
<div class="col-md-5">
<div class="form-area">
<form name='registration' onSubmit="return formValidation(event);" method="GET" action="Thank_You.html">
<br style="clear: both">
<h3 style="margin-bottom: 25px;">Registration Form</h3>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" name="fname" class="form-control required" id="fname" placeholder=" ">
</div>
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" name="lname" class="form-control required" id="lname" placeholder="Optional ">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<p>
<input type="radio" name="msex" value="male"> Male
<input type="radio" name="fsex" value="female"> Female
</p>
</div>
<div class="form-group">
<label for="address">Residential Address</label>
<input type="text" name="address" class="form-control required" id="address" placeholder=" ">
</div>
<div class="form-group">
<label for="contact">Phone Number</label>
<input type="text" name="contact" class="form-control required" id="contact" placeholder=" ">
</div>
<div class="form-group">
<label for="course">Course Selection</label>
<select name="courseSelection" class="form-control required" id="courseSelection">
<option value="select">Select a Course</option>
<option value="java">Programming in Java</option>
<option value="net">Programming in .Net</option>
<option value="msoffice">Microsoft Office</option>
<option value="html">HTML</option>
</select>
</div>
<button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
</form>
</div>
</div>
</div>
</body>
</html>
JavaScript:
function formValidation()
{
var ufname = document.registration.fname;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex;
var uadd = document.registration.address;
var contact = document.registration.contact;
var selection = document.registration.courseSelection;
{
if (allLetter(ufname, 4, 20))
{
if (validsex(umsex, ufsex))
{
if (validaddress(uadd))
{
if (Validucontact(contact, 9, 11))
{
if (VaildSelect(selection ))
{
}
}
}
}
}
}
return false;
}
function allLetter(fname, minLen, maxLen)
{
var NameLength = fname.value.length;
if (NameLength == 0 || NameLength > maxLen || NameLength < minLen) { // || - Or operator
alert("First Name should not be empty / length must be between " + minLen + " to " + maxLen);
fname.focus();
return false;
} else if (!isAlpha(fname)) { //! - Not operator
alert("Enter alphabets only");
fname.focus();
return false;
}
return true;
}
function isAlpha(input)
{
var characters = /^[A-Za-z]+$/; // Regular Expression [ ] - Options , A-Z - A,B, C ... Z, ^ - Any
if (input.value.match(characters)) {
return true;
}
return false;
}
function validsex(umsex,ufsex)
{
x=0;
if(umsex.checked)
{
x++;
}
if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
return true;}
}
function validaddress(uadd) {
if (uadd.value.length == 0) {
alert("Address must be filled out");
return false;
}
}
function Validucontact() {
//var contacts = document.registration.contact;
var contactLength = contact.value.length;
if (contactLength == 0 || contactLength < 9 || contactLength > 11) {
alert("Contact should not be empty / length must be " + 9 + " to " + 11);
contacts.focus();
}
if (!isNumber(contacts)) {
contacts.focus();
return false;
}
return true;
}
function isNumber(input) {
var characters = "/^[0-9{8}]+$/";
if (input.value.match(characters)) {
return true;
}
alert("Enter Numbers only");
return false;
}
function VaildSelect(selection)
{
if (selection.value == "select")
{
alert("Please select a course");
document.getElementById("courseSelection").focus();
return false;
}
return true;
}
I sincerely need some help on this as I really don't know what to do....
Address issue have been solve but the contact & dropdown list issue still there
Solution 1:[1]
Element IDs are case sensitive. You have document.getElementById("courseselection") in order to get an element with the ID courseSelection. You need to make both of them the same.
Also, it seems you are trying to call a function ValidSelect. You have no such function, but you do have ValidDropdwn.
The main problem is in validsex. It will always stop validation because it comes before the validation of the address field, the contact field, and the dropdown field. If it passes, it will display "Form successfully submitted" and reload the page. This stops the entire thing and doesn't even check anything else.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |