防止在输入无效时禁用按钮jQuery验证 [英] Prevent button disabling when inputs are not valid jQuery Validation

问题描述

我使用了此代码(来自SO)来禁用asp.net Web表单单击以禁用按钮

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

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

但是当我添加 jQuery验证&将用于WebForms的JQuery验证组插入页面，

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

即使输入无效，它也会禁用按钮.如果输入无效，如何避免禁用按钮?

解决方案

尝试使用插件的内置在.valid()方法中测试该表单，然后再禁用该按钮并提交.根据评论，我知道您正在使用另一个插件来初始化jQuery Validate插件，但是下面的核心概念应该是相同的.

演示: 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>

---

或者，如果您的其他插件允许您使用submitHandler回调函数，则强烈建议您使用它.

http://jsfiddle.net/h34bJ/

它仅以有效的形式触发，并且确实清除了许多这种多余和多余的事件处理.

$(document).ready(function () {

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

});

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?

解决方案

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

});

这篇关于防止在输入无效时禁用按钮jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！