单击按钮时清除 jQuery 验证答案

【问题标题】：Clear jQuery validation on button click单击按钮时清除 jQuery 验证
【发布时间】：2013-05-17 10:08:34
【问题描述】：

我有一个简单的表格。当我单击“提交”时，我使用 jQuery 验证方法验证控件。单击“取消”时，我无法清除验证。

这是我的代码：

<script type="text/javascript">

//Custom method
$.validator.addMethod("valueNotEquals", function (value, element, arg) {
    return arg != value;
}, "This field is required.");

var jqueryValidator;

$(document).ready(function () {

    $("#<%= btnSave.ClientID %>").click(function () {   

        jqueryValidator = $('#masterForm').validate({
            rules: {
                <%=gddTank.UniqueID %>: {
                    valueNotEquals: "-1"
                },
                <%=gddCanister.UniqueID %>: {
                    valueNotEquals: "-1"
                },
                <%=gddCane.UniqueID %>: {
                    valueNotEquals: "-1"
                },
                <%=gddStraw.UniqueID %>: {
                    valueNotEquals: "-1"
                }
            },
            highlight: function (element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function (element) {
                $(element).closest('.control-group').removeClass('error').addClass('success');
            }
        });

    });

    $("#<%= btnCancel.ClientID %>").click(function () {   

        jqueryValidator.resetForm();

    });

});

</script>

非常感谢任何帮助。

谢谢，威尔基。

【问题讨论】：

考虑将console.debug() 与Firebug 或browser console 一起使用。这将使您更容易找到问题。

标签： javascript jquery asp.net validation

【解决方案1】：

$("#<%= btnCancel.ClientID %>").click(function () {   
        jqueryValidator.resetForm(); 
        $('#masterForm').get(0).reset();
});

您会认为resetForm 方法会为您处理这一切，但由于某种原因，您必须采取额外的步骤，即在表单本身上调用reset。

【讨论】：

@Wilky - 我制作了一个示例表单，似乎效果很好（在取消按钮中，甚至不需要调用form.reset()：jsfiddle.net/nxXNz/29

【解决方案2】：

试试这个：

$("#<%= btnCancel.ClientID %>").click(function () {   
    jqueryValidator.resetForm();
    $(jqueryValidator.currentForm).find('input:not([type="button"],[type="submit"]),textarea').val('');
});

【讨论】：

我很确定这违背了插件resetForm() 方法的目的。