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.

Answer 1

A more elegant and fast solution is to simply override the default on-click and on-keyup events adding the code you need as follows instead of adding another listen 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 submit 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 very easy be used with jquery plug-in areYouSure to only enable the submit when actual changes are made:

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

initializing the plug-in using silent:

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

Answer 2

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="jane.smith@email.com" id="inputEmail" />
<input type="text" name="inputEmailConfirm" placeholder="jane.smith@email.com" 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.