Checking form input values with jquery

Question

I have a form that I want jquery to check and see if the input/select values with a class of required (These classes are in the #customerForm form) are blank. If they are I would like to prevent the form from submitting and change the color of the input/select box to red. If all of the input/select values with a class of required do have values, I would like to submit the form, fade the form inputs out and and fadeIn the next form. Here's my code:

$('#customerForm').submit(function (event) {
    var value = $('.required').each();
    if (value === "") {
        value.addClass("invalid");
        return false;
    } else {
        value.removeClass("invalid");
        $('#billForm, #shipForm').fadeOut();
        $('#payment-form').fadeIn();
    }
});

The problem is the form doesn't check for the input values and submits the form anyways. Any help would be amazing.

Bart · Accepted Answer · 2016-03-21 00:54:25Z

1

$('.required').each() returns an array of inputs.

You have to loop through each input and check the value before the form can be submit.

$( ".required" ).each(function() {
  //validation
});

more complete example:

$('#customerForm').submit(function (event) {
  var error = false;
  $( ".required" ).each(function() {
    if ($(this).val() === "") 
    {
      $(this).addClass("invalid");
      error = true;
    } 
    else 
    {
      $(this).removeClass("invalid");
    }
  });
  if(!error)
  {
    $('#billForm, #shipForm').fadeOut();
    $('#payment-form').fadeIn();
  }
  else
  {
    return false;
  }
});

edited Mar 21, 2016 at 0:54

answered Mar 21, 2016 at 0:24

Bart

4324 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carl Jones Over a year ago

Strange. If all of the input fields are blank the class of invalid shows up. But if I enter one input value or all and press submit, The form submits and takes me to my form processing page (I don't want this).

Bart Over a year ago

Sorry, think it might have been the this which was supposed to be $(this) which was causing the issue, glad you got it working

Kylie · Accepted Answer · 2016-03-21 00:19:55Z

You cant grab a field using each. Each is to iterate through them.

So you need to do this.

 $('#customerForm').submit(function (event) {
     var value = $('.required'); // Get all the required fields
     var cnt=0; // setup a counter
     // Loop therough required fields and apply error class based on value
     $.each(value, function(i,val){
           if (val.val() === "") {
             cnt++;//add to the count of invalid fields
             val.addClass("invalid");// apply error class
           } else {
             val.removeClass("invalid");
           }
     });
     // Check the cnt variable is larger than 0, means we have errors
     if(cnt!=0){
          return false;
     // otherwise, continue
     } else {
        $('#billForm, #shipForm').fadeOut();
        $('#payment-form').fadeIn();
     }
});

ikdekker · Accepted Answer · 2016-03-21 00:21:22Z

0

You should loop through each element like this

$('.required').each((function( index ) {
var error = 0;
value = $(this).html();
if (value === "") {
    this.addClass("invalid");
    error = 1;
} else {
    this.removeClass("invalid");
    $('#billForm, #shipForm').fadeOut();
    $('#payment-form').fadeIn();
}
if (error)
    return false;
});

answered Mar 21, 2016 at 0:21

ikdekker

4153 silver badges11 bronze badges

Collectives™ on Stack Overflow

Checking form input values with jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related