Validation on a form in JS

Question

I've got a form that needs validating before the data in the form is added to a service queue:

self.ee.on('validateForm', function(formData){
 // Validation
 var isValid = false;
 var validTitle = false;
 var validDescription = false;
 var validObjectives = false;
 var validOutcome = false;
 var validHours = false;
 if(formData.title==null){
 console.log("error on title")
 isValid = false;
 }
 else{
 validTitle = true;
 console.log("title is valid");
 }
 if(formData.description==null){
 console.log("error on description")
 isValid = false;
 }
 else{
 validDescription = true;
 console.log("description is valid");
 }
 if(formData.objectives==null){
 console.log("error on objectives")
 isValid = false;
 }
 else{
 validObjectives = true;
 console.log("objectives is valid");
 }
 if(formData.outcome==null){
 console.log("error on outcome")
 isValid = false;
 }
 else{
 validOutcome = true;
 console.log("outcome is valid");
 }
 if(formData.hours== null){
 console.log("Error on hours")
 isValid = false;
 }
 else{
 validHours = true;
 console.log("hours is valid");
 }
 if(validTitle && validDescription && validObjectives && validOutcome && validHours){
 isValid = true;
 }
 if (isValid) {
 self.ee.emit('formIsValid', formData);
 } else {
 self.ee.emit('formIsInvalid', formData);
 }
 });

It works fine, if all the conditions are met it passes onto my formisvalid function, which creates the message and adds and it to the service queue fine.

Is there a nicer/better way of doing the above?

Answer 1

Since you are only checking all of your fields against null, you could add the field names to an array and then loop through the array.

var isValid = true;
var fields = ['title', 'description', 'objectives', 'outcome', 'hours'];
for ( var i = 0, n = fields.length; i < n; i++ ) {
 key = fields[i];
 if ( formData[key] == null ) {
 console.log("error on " + key);
 isValid = false;
 } else {
 console.log(key + " is valid");
 }
}

• BenYeomans: Thanks for your comment, this is the way I went with :) I would up vote but I am lacking the rep

Answer 2

You can use a library to help you with form validations. In general they are well-tested, with several types of validation built in and with a nice syntax and/or non-invasive way using it.

I can cite two libs that I have used in my projects, both are based on jQuery:

http://jqueryvalidation.org/

http://formvalidator.net/

An example using jQuery Form Validator (second link):

<form action="/registration" method="POST">
 <p>
 Name (4 characters minimum):
 <input name="user" data-validation="length" data-validation-length="min4">
 </p>
 <p>
 Year (yyyy-mm-dd):
 <input name="birth" data-validation="date" data-validation-format="yyyy-mm-dd">
 </p>
 <p>
 Website:
 <input name="website" data-validation="url">
 </p>
 <p>
 <input type="submit">
 </p>
</form>

You can see that it uses the attribute data-validation to define which type of validation should operate on the field, and data-validation-XXX to define validation parameters.

Answer 3

You could remove

if(validTitle && validDescription && validObjectives && validOutcome && validHours){
 isValid = true;
}

and all occurrences of validTitle, validDescription, validObjectives, validOutcome, validHours and initialize isValid = true; at the beginning of your code.