CODEWITHSUNDEEP
jqueryforms
Mervin
Mervin

Reputation: 725

Using Jquery to validate all the form fields at the same time?

I wrote my custom jquery validation script to validate the fields in the form (all of which are required but the way the code is structured is that the fields are validated one by one and not all at once (when the submit button is clicked) .The code is given below 

    $('#contactForm').submit(function () {      

        $(".error").remove();   

var name = $("#name").val();
        var email = $('#email').val();
        var subject= $('#subject').val();
        var message = $('#message').val();

var hasError = false;

var emailReg = /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
 if(name == '') {
      $("#name").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

else if(subject == '') {
      $("#subject").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

else if(message == '') {
      $("#message").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

  else if(!emailReg.test(email)) {
      $("#email").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

  else  if(email == '') {
      $("#email").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

How do I modify this code so that all the fields get validated at the same time.

I did try using the jquery validate function but for some reason,when I used that ,it would clash with other jquery elements with my page resulting in the form getting submitted despite having incorrct values

Upvotes: 0

Views: 3977

Answers (2)

字姓名
字姓名

Reputation: 436

as the fileds are validated differently and the messages a user gets are different to, you can't validate all the fields at same time, instead youcan group fields that must be validated with the same algorhithm by e.g. setting the same class to them (it can be notShouldBeBlank class name for all the inputs that shouldn't be blank):

$('#contactForm').submit(function () {

    $.each($('#contactForm .notShouldBeBlank'), function()
    {
        if($(this).val() == ''){
            $(this).after('<span class="error">This field is required.</span>');
        }
    });

    // Other groups validated here
}

Hope this will help!

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Change all else if to if's.

if(name == '') {
      $("#name").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

if(subject == '') {
      $("#subject").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

if(message == '') {
      $("#message").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

  if(!emailReg.test(email)) {
      $("#email").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

  if(email == '') {
      $("#email").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

Upvotes: 2

Related Questions