Enabling disabled button after successful jQuery validation

Question

I have the following code where I have 2 email input fields which I need to validate they are the same which is working successfully using jQuery validate equalTo.

<div class="control-group">
 <label class="control-label" for="inputEmail"><strong>Email Address</strong></label>
   <div class="controls">
    <input type="email" name="inputEmail" placeholder="[email protected]" id="inputEmail" required>
   </div>
    <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong></label>
     <div class="controls">
    <input type="email" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" required>
    </div>
    </div>
  <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout &raquo; </button>

Upon successful validation I wish to enable the button, but can't seem to figure out how to do this.

 $('#ccSelectForm').validate({
    rules: {
      inputEmail: {
        required: true,
        email: true
      },
      inputEmailConfirm: {
        required: true,
        email: true,
        equalTo: '#inputEmail'
      },
    }
  });

Ideally as bonus I'd like to set the form controls to utilise the validation states in Bootstrap3, detailed here - http://getbootstrap.com/css/#forms-control-validation

Fiddle is here http://jsfiddle.net/4wU5m/

Answer 1

There is no jQuery Validate plugin callback option/function that fires when all fields are valid without first clicking the submit button.

You'll need to create an external keyup blur event handler that checks your form for validity and enables/disables the button accordingly; every time a key is pressed or you leave a field.

DEMO: http://jsfiddle.net/p628Y/1/

$(document).ready(function () {

    $('#ccSelectForm').validate({
        rules: {
            inputEmail: {
                required: true,
                email: true
            },
            inputEmailConfirm: {
                // required: true,  // <-- redundant
                // email: true,     // <-- redundant
                equalTo: '#inputEmail'
            }  // <-- removed trailing comma
        }
    });

    $('#ccSelectForm input').on('keyup blur', function () { // fires on every keyup & blur
        if ($('#ccSelectForm').valid()) {                   // checks form for validity
            $('button.btn').prop('disabled', false);        // enables button
        } else {
            $('button.btn').prop('disabled', 'disabled');   // disables button
        }
    });

});    

Since the jQuery Validate plugin disables the browser's HTML5 validation dynamically, I removed the required attribute from your markup and changed type="email" into type="text". (You already have these validation rules specified in the plugin.)

<input type="text" name="inputEmail" placeholder="[email protected]" id="inputEmail" />
<input type="text" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" />

You also don't need to specify all the rules twice when using the equalTo rule as the second field must already always match the first.

---

EDIT:

In the above scenario, your page is totally dependent upon JavaScript. In other words, without JavaScript, the button is always disabled.

If you have server-side validation in place and want your page to be independent of JavaScript, you'll need to remove the disabled="disabled" from your button markup and add it to your JavaScript just inside the DOM ready event handler.

$('button.btn').prop('disabled', 'disabled');

In this scenario, without JavaScript, you'll still have a working button, and with JavaScript, the button is disabled programatically on page load.