Custom Form Validation: Disable/Enable Submit Button in reference to validation

JavaScript
1

I have only had a week to learn JQuery, I still suck at it but getting there.

I created the below code as I do not want to use JQuery Validator Plugging. I needed to create a validation to work with ASP.NET (Web Forms).
This works on Blur (when users leave a field), now I want to disable the button when the form loads and enabled it when all fields have validated.
I tried several things but they never work:

  1. Check to see if any form element has an error class
  2. Created a Boolean Variable that evaluates to false if input not valid and use this variable to trigger button
  3. Add the code to enabled/Disable button directly to each conditional statement

I need to disable the submit button until all fields pass validation, if the fields pass validation and the user goes back and make changes that do not pass validation then the button becomes disable again.

Here is the complete validation code minus all my experiment:


$(document).ready(function () {

    $('#txtUserName').blur(function () {
        if ($('#txtUserName').val().match(isNumberLetter) && ($('#txtUserName').val().length >= 8)) {
            $('#userNameError').removeClass("error").addClass("default");
            $('#txtUserName').removeClass("alert");
            $('#txtUserName + label').removeAttr("id", "lblUserName");
        }
        else {
            $('#userNameError').removeClass("default").addClass("error");
            $('#txtUserName').addClass("alert");
            $('#txtUserName + label').attr("id", "lblUserName");
        }
    });


    $('#txtPassword').blur(function () {
        if ($('#txtPassword').val().match(isPassword) && ($('#txtPassword').val().length >= 8)) {
            $('#passwordError').removeClass("error").addClass("default");
            $('#txtPassword').removeClass("alert");
            $('#txtPassword + label').removeAttr("id", "lblPassword");

            //FLAG USER TO CONFIRM PASSWORD IF INITIAL PASSWORD IS VALID
            //----------------------------------------------------------

            $('#passwordConfirmError').removeClass("default").addClass("error");
            $('#txtConfirmPassword').addClass("alert");
            $('#txtConfirmPassword + label').attr("id", "lblConfirmPassword");

        }
        else {
            $('#passwordError').removeClass("default").addClass("error");
            $('#txtPassword').addClass("alert");
            $('#txtPassword + label').attr("id", "lblPassword");

            //TURN OF PASSWORD REENTRY FLAG IS INITIAL PASSWORD REENTRY IS INVALID
            //ONLY REQUEST PASSWORD REENTRY IF INITIAL VALUE IS VALID
            //--------------------------------------------------------------------

            $('#passwordConfirmError').removeClass("error").addClass("default");
            $('#txtConfirmPassword').removeClass("alert");
            $('#txtConfirmPassword + label').removeAttr("id", "lblConfirmPassword");
        }
    });


    $('#txtConfirmPassword').blur(function () {
        if ((IsValidPassWord == true) && ($('#txtConfirmPassword').val()) === ($('#txtPassword').val())) {
            $('#passwordConfirmError').removeClass("error").addClass("default");
            $('#txtConfirmPassword').removeClass("alert");
            $('#txtConfirmPassword + label').removeAttr("id", "lblConfirmPassword");
        }
    });



    $('#txtEmail').blur(function () {
        if ($('#txtEmail').val().match(emailPattern) && ($('#txtEmail').val() != '')) {
            $('#emailError').removeClass("error").addClass("default");
            $('#txtEmail').removeClass("alert");
            $('#txtEmail + label').removeAttr("id", "lblEmail");

            $('#emailConfirmError').removeClass("default").addClass("error");
            $('#txtConfirmEmail').addClass("alert");
            $('#txtConfirmEmail + label').attr("id", "lblConfirmEmail");

        }
        else {
            $('#emailError').removeClass("default").addClass("error");
            $('#txtEmail').addClass("alert");
            $('#txtEmail + label').attr("id", "lblEmail");

            $('#emailConfirmError').removeClass("error").addClass("default");
            $('#txtConfirmEmail').removeClass("alert");
            $('#txtConfirmEmail + label').removeAttr("id", "lblConfirmEmail");
        }
    });

    $('#txtConfirmEmail').blur(function () {
        if ((IsValidEmail == true) && ($('#txtConfirmEmail').val()) === ($('#txtEmail').val())) {
            $('#emailConfirmError').removeClass("error").addClass("default");
            $('#txtConfirmEmail').removeClass("alert");
            $('#txtConfirmEmail + label').removeAttr("id", "lblConfirmEmail");

        }
    });


    $('#ddlSecurityQuestion').blur(function () {
        if ($("select option:selected").index() <= 0) {
            $('#securityQuestionError').removeClass("default").addClass("error");
            $('#ddlSecurityQuestion').addClass("alert");
            $('#ddlSecurityQuestion + label').attr("id", "lblSecurityQuestion");
        }
        else {
            $('#securityQuestionError').removeClass("error").addClass("default");
            $('#ddlSecurityQuestion').removeClass("alert");
            $('#ddlSecurityQuestion + label').removeAttr("id", "lblSecurityQuestion");

        }
    });

    $('#txtSecurityAnswer').blur(function () {
        if ($('#txtSecurityAnswer').val().match(isNumberLetterTab)) {
            $('#securityAnswerError').removeClass("error").addClass("default");
            $('#txtSecurityAnswer').removeClass("alert");
            $('#txtSecurityAnswer + label').removeAttr("id", "lblSecurityAnswer");
        }
        else {
            $('#securityAnswerError').removeClass("default").addClass("error");
            $('#txtSecurityAnswer').addClass("alert");
            $('#txtSecurityAnswer + label').attr("id", "lblSecurityAnswer");
        }
    });
});

Please, please take a look:

Thank you for helping.

2

Hello everyone:
I had this idea in mind but wasn’t sure how to get it done: If you search the internet, there are hundreds of examples, however; most of the solution are for one input or field: Such as this one: http://www.revillwebdesign.com/jquery-disable-button/

My solution is “not sexy but it’s got teeth” - Tom Cruise, The Firm.

I created several variables, these variable evaluates to true/false based on the data entered into respective form field.
With that in place, I created this function using the Blur method/event to continuously evaluate the variables as the user is completing the form. If all the variable evaluate to true the button is enabled else the button is disabled.

I am sure there are hundreds of better ways to do this but as I learn JQuery/JavaScript, I’ll continue to revisit the code. Alternatively I could wait for an answer which in all respect don’t appear to be coming. It’s the weekend! :slight_smile:

Here is a sample of part of the code:



var IsValidUserName;

$(document).ready(function () {
    $('#btnSubmit').attr('disabled', true);

    $('#txtUserName').blur(function () {
        if ($('#txtUserName').val().match(isNumberLetter) && ($('#txtUserName').val().length >= 8)) {
            $('#userNameError').removeClass("error").addClass("default");
            $('#txtUserName').removeClass("alert");
            $('#txtUserName + label').removeAttr("id", "lblUserName");
            IsValidUserName = true;
        }
        else {
            $('#userNameError').removeClass("default").addClass("error");
            $('#txtUserName').addClass("alert");
            $('#txtUserName + label').attr("id", "lblUserName");
            IsValidUserName = false;
        }
    });

 $('#membership :input').blur(function () {

        if (IsValidUserName && IsValidPassWord && IsValidConfirmPassword &&
            IsValidEmail && IsValidConfirmEmail && IsValidQuestion && IsValidAnswer) {

            $('#btnSubmit').attr('disabled', false);
        } else {
            $('#btnSubmit').attr('disabled', true);
        }

    });
});

Thanks my friends!