Prevent button disabling when inputs are not valid

Question

I used this code (from SO) to disable asp.net Web Form button to disable button when clicked

$(document).ready(function () {
    $('[id$=btnSave]').click(function () {
        var button = this;

        setTimeout(function () {
            $(button).attr('disabled', 'disabled');
        }, 100);
    });
});

but when I add jQuery validation & JQuery Validation Groups for WebForms plugins to page,

$(document).ready(function () {
    $("#form1").validateWebForm({
        rules: {
            myDate: {
                customDate: true
            },
            nic: {
                nicNo: true
            }
        }
    });
...
<asp:TextBox ID="txtName" runat="server" CssClass="required" ></asp:TextBox>

It disables the button even when the inputs are not valid. How to avoid disabling the button if the inputs are not valid?

Answer 1

Try using the plugin's built-in .valid() method to test the form before disabling the button and submitting. As per comments, I realize you're initializing the jQuery Validate plugin with another plugin, but the core concept below should work the same.

DEMO: http://jsfiddle.net/7HzZF/

jQuery:

$(document).ready(function() {

    $('#myform').validate({
        // rules & options
    });

    $('#button').on('click', function (e) {
        e.preventDefault();
        if ($('#myform').valid()) {
            $('#myform').submit();
            $(this).attr('disabled', 'disabled');
        }
    });

});

HTML:

<form id="myform">
    ....
    <input id="button" type="submit" />
</form>

---

Alternatively, if your other plugin allows you to use the submitHandler callback function, I strongly recommend using that instead.

http://jsfiddle.net/h34bJ/

It only fires on a valid form and it really clears up a lot of this redundant and superfluous event handling.

$(document).ready(function () {

    $('#myform').validateWebForm({
        // your rules,
        submitHandler: function (form) {
            $('#button').attr('disabled', 'disabled');
        }
    });

});