Nitro0003 Nitro0003 - 2 months ago 5
HTML Question

Validating all form fields -- function not working correctly

I created a html form and a function

validateForm()
to validate the form fields. However the function is only reporting issues with wrong email input, and its not validating the other fields in the form. Can you check my code to see if i have any errors.

Thanks

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Support Center</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<link rel="stylesheet" href="styles/Form.css" type="text/css">
<script type="text/javascript" src="Form.js"></script>
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1><a href="index.html">Support Center</a></h1>
<h2>Welcome to our website</h2>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Our Staff</a></li>
<li><a href="#">Location</a></li>
<li><a href="Form.html">Help</a></li>
<li class="last"><a href="#"></a></li>
</ul>
</nav>
</header>
</div>
</body>
<!-- content -->
<body>
<h1>Help is here!</h1>
<form>
<h1>Should you need assistance, please do not hesitate to contact us:</h1>

<div class="contentform">
<div id="sendmessage"> Your form has been sent successfully. Thank you. </div>

<div class="leftcontact">
<div class="form-group">
<p>Surname<span>*</span></p>
<span class="icon-case"><i class="fa fa-male"></i></span>
<input type="text" name="lastName" id="lastName"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>First Name <span>*</span></p>
<span class="icon-case"><i class="fa fa-user"></i></span>
<input type="text" name="firstName" id="firstName"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>E-mail <span>*</span></p>
<span class="icon-case"><i class="fa fa-envelope-o"></i></span>
<input type="email" name="emailAddress" id="emailAddress"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>Office <span>*</span></p>
<span class="icon-case"><i class="fa fa-location-arrow"></i></span>
<input type="text" name="office" id="office"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>Desk <span>*</span></p>
<span class="icon-case"><i class="fa fa-map-marker"></i></span>
<input type="text" name="deskNumber" id="deskNumber"/>
<div class="validation"></div>
</div>



</div>

<div class="rightcontact">
<div class="form-group">
<p>Phone number <span>*</span></p>
<span class="icon-case"><i class="fa fa-phone"></i></span>
<input type="text" name="mobilePhone" id="mobilePhone"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>Job Number <span>*</span></p>
<span class="icon-case"><i class="fa fa-building-o"></i></span>
<input type="text" name="jobNumber" id="jobNumber"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>Computer <span>*</span></p>
<span class="icon-case"><i class="fa fa-info"></i></span>
<input type="text" name="computerNumber" id="computerNumber"/>
<div class="validation"></div>
</div>

<div class="form-group">
<p>Problem <span>*</span></p>
<span class="icon-case"><i class="fa fa-comment-o"></i></span>
<select name="Problem">
<option value="New User">New User</option>
<option value="Delete User">Delete User</option>
<option value="Lost File">Lost File</option>
<option value="New Software Installation">New Software Installation</option>
<option value="Virus Checking">Virus Checking</option>
</select>
<div class="validation"></div>
</div>

<div class="form-group">
<p>A little about your problem <span>*</span></p>
<span class="icon-case"><i class="fa fa-comments-o"></i></span>
<textarea name="message" rows="14"></textarea>
<div class="validation"></div>
</div>
</div>
</div>
<button type="submit" class="bouton-contact">Send</button>

</form>


</body>
</html>

</body>
</html>


Code

function validateForm() {
var letters = "[A-Za-z]+$";
var numbers = "^[0-9]+$";
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;


var jobNumber = document.getElementById("jobNumber").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var mobilePhone = document.getElementById("mobilePhone").value;
var emailAddress = document.getElementById("emailAddress").value;
var officeNumber = document.getElementById("office").value;
var deskNumber = document.getElementById("deskNumber").value;
var computerNumber = document.getElementById("computerNumber").value;


if(jobNumber != "" && firstName != "" && lastName != "" && mobilePhone != "" && emailAddress != "" && officeNumber != "" && deskNumber != "" && computerNumber != "") {

if(jobNumber.length == 5 && jobNumber.match(numbers)) {

if(firstName.match(letters) && lastName.match(letters)) {

if(mobilePhone.length == 10 && mobilePhone.match(numbers)) {

if(emailAddress.match(emailReg)) {
alert("Form submitted!");
return true;
}
else {
alert("Please enter a valid email");
return false;
}

}
else {
alert("Please enter a valid mobile number");
return false;
}

}
else {
alert("Please enter a valid first name and last name");
return false;
}

}
else {
alert("Please enter a valid job number");
return false;
}

}
else {
alert("Please enter in all fields");
return false;
}

}

Answer

Edit: I just noticed you're using a class contentform and I thought it was an id. I would also add an id to your form to be able to retrieve all form data with one DOM traversal instead of several. Also, the reason the email is the only one working is because the browser is validating the email without using your JS.

First I would ditch all the variables declared and replace it with the form object.

var formObject = document.getElementById('contentform');

Then you could check whatever child elements that are required. I would also remove the nesting of your if statements, and instead of alerting an error and returning false, add the error to an array to store each one, then return after all items are validated.

var errorList = [];
var isValid = true;
if(formObject.jobNumber == "") {
    errorList.push('Please enter a valid job number');
    isValid = false;
}

Then rinse and repeat for each element required. After that, just return the list and status (isValid).

// this should be on its own at the bottom of your function right before you return
if (!isValid) {
    alert(errorList); 
    // I would add some formatting or preferably display in the form view.
}

return isValid;


html file
// add the event handler here
<button type="submit" onclick="validateForm()" class="bouton-contact">Send</button>

Also, these

if (!isValid) {
    alert(errorList);
}

should be removed from each if statement and placed at the bottom after all have been checked.