Prevent button disabling when inputs are not valid jQuery Validation

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?

i think wrapping the click function in the ready is the problem.. — sasi
– sasi, Commented Mar 21, 2013 at 4:31
jQuery Validate plugin does not use validateWebForm(). The initialization function is just called .validate(). — Sparky
– Sparky, Commented Mar 21, 2013 at 4:34
@sasi No it does not even disable the button when I remove the ready function... — Nalaka526
– Nalaka526, Commented Mar 21, 2013 at 4:41
@Sparky Yes I'm using another plugin JQuery Validation Groups for WebForms. Updated the question. Thanks... — Nalaka526
– Nalaka526, Commented Mar 21, 2013 at 4:43

Sparky · Accepted Answer · 2013-03-21 07:25:09Z

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');
        }
    });

});

edited Mar 21, 2013 at 7:25

answered Mar 21, 2013 at 4:43

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nalaka526 Over a year ago

This disables the button correctly but does not submit the form. May be it needs to accompany setTimeout function used in my original code (but reloads the same page). I tried to add it but still could't make it work.

Nalaka526 Over a year ago

Its working... Had to add setTimeout function and remove line $('#myform').submit();. However Thanks a lot... :)

Sparky Over a year ago

@Nalaka526, I'm not sure, although it might be because I forgot to include the preventDefault which removes the submit from the normal click, then only puts it back when the form is valid.

Nalaka526 Over a year ago

Updated to new code but Uncaught ReferenceError: e is not defined in line e.preventDefault();...

Sparky Over a year ago

@Nalaka526, e has to be passed into the function where it's called... function(e)

|

Collectives™ on Stack Overflow

Prevent button disabling when inputs are not valid jQuery Validation

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related