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?

bstakes · Accepted Answer · 2014-08-05 11:47:43Z

5

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");
    }
}

answered Aug 5, 2014 at 11:47

bstakes

1661 bronze badge

\$\begingroup\$ Thanks for your comment, this is the way I went with :) I would up vote but I am lacking the rep \$\endgroup\$

BenYeomans
– BenYeomans

2014-08-05 12:35:36 +00:00
Commented Aug 5, 2014 at 12:35

Add a comment |

Schism · Accepted Answer · 2014-08-05 15:20:47Z

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.

ABucin · Accepted Answer · 2014-08-05 12:29:07Z

0

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.

edited Aug 5, 2014 at 12:29

answered Aug 5, 2014 at 11:37

ABucin

1012 bronze badges

Add a comment |

Stack Exchange Network

Validation on a form in JS

3 Answers 3

You must log in to answer this question.

Hot Network Questions

Validation on a form in JS

3 Answers 3

You must log in to answer this question.

Related

Hot Network Questions