Manual form validation jQuery

Question

I'm trying to do some manual form validation in jQuery just to get a hang of it. I know there are plugins that do this but this is not the point.

This is my code:

$( document ).ready(function() {
//amount of input fields we need this for activation of button
var amount = $('.form-group').length;

  //blur checks when you leave an input field
$('.form-group input').blur( function() {
    //if the input is empty put red bg color
    if( !$(this).val() ) {
        $(this).css("background-color", "red");
    }
     //if field is filled in bg is white and amount -1.
     //once amount is 1 we know fields are filled in
        if( $(this).val() ) {
        $(this).css("background-color", "white");
        amount = amount - 1;
        if(amount === 1 && $('#tos').prop('checked') ) {
          //code to remove the attribute disabled
          $('button').removeAttr("disabled")
          $('button').html("Send")

            }
        }

    });
});

It breaks on following line:

if(amount === 1 && $('#tos').prop('checked') )

both work fine if I write them seperate but when I try to use the && operator doesn't seem to work.

Answer 1

try using additional grouping

if((amount === 1) && $('#tos').prop('checked') )

According to the operator precedence table the === has higher precedence than the && so your code should not need the additional grouping though.. Hmz.