Enabling a disabled button after a successful jQuery validation

Question

I have the following code where I have two email input fields that I need to check, they are the same as with the successful use of 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=" [e-mail] " 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=" [e-mail] " 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> 

After a successful check, I want to turn on the button, but I can’t figure out how to do this.

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

Ideally, as a bonus, I would like to install formula controls for using validation states in Bootstrap3, more details here - http://getbootstrap.com/css/#forms-control-validation p>

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

Answer 1

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

You will need to create an external keyup blur event handler that checks your form for validity and accordingly enables / disables this button; every time a key is pressed or you leave the 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 HTML5 check of the browser dynamically, I removed the required attribute from your markup and changed type="email" to type="text" . (You already have these validation rules specified in the plugin.)

 <input type="text" name="inputEmail" placeholder=" [e-mail] " id="inputEmail" /> <input type="text" name="inputEmailConfirm" placeholder=" [e-mail] " id="inputEmailConfirm" /> 

You also do not need to specify all the rules twice when using the equalTo rule, since the second field should always match the first.

---

EDIT:

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

If you have server-side validation and you want your page not to depend on JavaScript, you need to remove disabled="disabled" from the layout of your button and add it to your JavaScript right inside the DOM ready event handler.

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

In this scenario, without JavaScript, you will still have a working button, and with JavaScript, the button will be automatically disabled when the page loads.

Answer 2

A more elegant and faster solution is to simply override the default events by pressing and on-keyup, adding the required code as follows, instead of adding another listening event

 $("#form").validate({ submitHandler: function(form) { form.submit(); }, onkeyup: function( element, event ) { if ( event.which === 9 && this.elementValue(element) === "" ) { return; } else if ( element.name in this.submitted || element === this.lastElement ) { this.element(element); } this.checkForm(); if (this.valid()) { // checks form for validity $('a.submit').attr('class', 'submit btn btn-success'); // enables button } else { $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button } }, onclick: function( element ) { // click on selects, radiobuttons and checkboxes if ( element.name in this.submitted ) { this.element(element); // or option elements, check parent select in that case } else if ( element.parentNode.name in this.submitted ) { this.element(element.parentNode); } this.checkForm(); if (this.valid()) { // checks form for validity $('a.submit').attr('class', 'submit btn btn-success'); // enables button } else { $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button } } }) 

With the following css code for the send trigger - initially disabled (bootstrap 3 classes):

 <a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a> 

This can be easily used with the jQuery areYouSure plug- in to enable display only when making the actual changes:

 if (this.valid() && $('#form').hasClass('dirty')) { // checks form for validity 

plugin initialization using silent:

 $('#form').areYouSure( {'silent':true} );