SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code javascript:
    $(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. #2
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Here is a sample of part of the code:

    Code javascript:
     
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •