While trying to hide submit button until all input fields are valid it is hiding only for the first text filed validation?

Question

Working on form validation i'am trying to hide submit button until all text and password fields are not null and satisfies all input validation, but the problem is, it is enabling the submit button for the first text field validation only.

So what's wrong with my code, please correct me.,

Here's the code:

$(document).ready(function() {

var error_firstName = false;
var error_lastName = false;
var error_emailAdd = false;
var error_pass = false;
var error_confirmPass = false;
var error_mobile = false;
var error_confirmMob = false;   

$("#error_form_firstName").hide();
$("#error_form_lastName").hide();
$("#error_form_emailAdd").hide();
$("#error_form_password").hide();
$("#error_span").hide();
$("#error_form_confirmPassword").hide();
$("#error_form_mobile").hide();
$("error_form_confirmNumber").hide();

$("#formSubmit").attr("disabled", "disabled");

$("#form_firstName").focusout(function() {
    check_FirstName();
});

$("#form_lastName").focusout(function() {
    check_LastName();
});

$("#form_email").focusout(function() {
    check_email();
});

$("#form_pass").focusout(function() {
    check_password();
});

$("#form_cPass").focusout(function() {
    check_confirm_password();
});

$("#form_mob").focusout(function() {
    check_Mobile();
});

$("#form_cMob").focusout(function() {
    check_cMobile();
});

$('input, password').change(function(){
if(error_firstName == false && error_lastName == false && error_emailAdd == false && error_pass == false && error_confirmPass == false && error_mobile == false && error_confirmMob == false){
        $("input[type=submit]").removeAttr("disabled");
            return true;
        }
        else{
            alert("Please fill the form correctly");
            return false;
        }
    });
});

Corresponding HTML code for form validation:

<form:form id="reg_form" action="submitRegistration.do" method="POST"
                commandName="registrationForm">
                <div class="col-md-6 col-md-offset-3 register-top-grid">
                    <h3>Please fill the below information</h3>
                    <div>
                        <span>First Name</span>
                        <form:input id="form_firstName" path="firstName" />
                        <form:errors path="firstName" cssStyle="color:red" element="div" />
                        <p id="error_form_firstName" class="errorMessage"></p>
                    </div>
                    <div>
                        <span>Last Name</span>
                        <form:input id="form_lastName" path="lastName" />
                        <form:errors path="lastName" cssStyle="color:red" element="div" />
                        <p id="error_form_lastName" class="errorMessage"></p>
                    </div>
                    <div>
                        <span>Email Address</span>
                        <form:input id="form_email" path="email" />
                        <form:errors path="email" cssStyle="color:red" element="div" />
                        <p id="error_form_emailAdd" class="errorMessage"></p>
                    </div>
                    <div>
                        <span>Password</span>
                        <form:password id="form_pass" path="password" />
                        <form:errors path="password" cssStyle="color:red" element="div" />
                        <p id="error_form_password" class="errorMessage"></p>

                        <!-- This is for extra line after password for alignment of error_text -->
                        <p id="error_span" class="errorMessage"></p>
                    </div>
                    <div>
                        <span>Confirm Password</span>
                        <form:password id="form_cPass" path="confirmPassword" />
                        <form:errors path="confirmPassword" cssStyle="color:red" element="div" />
                        <p id="error_form_confirmPassword" class="errorMessage"></p>
                    </div>
                    <div>
                        <span>Mobile Number</span>
                        <form:input id="form_mob" path="mobile" />
                        <form:errors path="mobile" cssStyle="color:red" element="div" />
                        <p id="error_form_mobile" class="errorMessage"></p>
                    </div>
                    <div>
                        <span>Confirm Mobile Number</span>
                        <form:input id="form_cMob" path="confirmMobile" />
                        <form:errors path="confirmMobile" cssStyle="color:red" element="div" />
                        <p id="error_form_confirmNumber" class="errorMessage"></p>
                    </div>
                    <div style="text-align: center">
                        <input id="formSubmit" type="submit" value="submit" /> <button id="clear" type="button" value="clear" />
                    </div>
                    <a class="news-letter" href="#"> <label class="checkbox">
                    <input type="checkbox" name="checkbox" checked=""><i> </i>Sign Up for Newsletter</label>
                    </a>
                </div>
                <div class="clearfix"></div>
            </form:form>

Answer 1

IF I am reading this correctly, you have a function for each input to check THAT ONE INPUT when you focus out. Now assume you have First Name and it is OK after entry - your 'Last Name' has not yet been entered/checked; yet you have negative errors (all set false) by default. I would suggest to set them all to true instead - so that they are all entered before the submit gets enabled. I make assumption that all elements are required.

Optionally, on one "focusout", trigger that focusout event on ALL of them, but that is a good bit of extra code on each focus out.

Another option would be to have a "validateform" function and use that for all of them ie

var error_firstName = true;
var error_lastName = true;
var error_emailAdd = true;
var error_pass = true;
var error_confirmPass = true;
var error_mobile = true;
var error_confirmMob = true;   

function validateform(){
  check_FirstName();
  check_LastName();
  check_email();
  // the others in here...
  // now do this
  var hasErrors = error_firstName 
        || error_lastName 
        || error_emailAdd 
        || error_pass 
        || error_confirmPass
        || error_mobile 
        || error_confirmMob;
  if(hasErrors){alert("Please fill the form correctly");}
  $("#formSubmit").prop("disabled", hasErrors");
  return hasErrors;
}
// add others in here
$("#form_firstName,#form_lastName,#form_email")
  .on("focusout change",validateform);

Note you could also do a bulk show/hide of your error things like this:

function displayErrorThings(){
    $("#error_form_firstName").toggle(error_firstName);
    $("#error_form_lastName").toggle(error_lastName);
    $("#error_form_emailAdd").toggle(error_emailAdd);
    $("#error_form_password").toggle(error_pass);
    $("#error_span").toggle(error_pass);
    $("#error_form_confirmPassword").toggle(error_confirmPass);
    $("#error_form_mobile").toggle(error_mobile);
    $("error_form_confirmNumber").toggle(error_confirmMob);
}

Thus just call it in the same validation function above (and on initial start)

displayErrorThings()