jquery - 如何抑制 jquery 验证取消？

Question

我正在使用 jquery validate 插件进行表单验证。我发现取消功能有些奇怪。我有一张带有一个电子邮件字段、一个提交按钮和一个取消按钮的表单。当我在电子邮件字段中输入不完整的地址，然后在不单击页面上其他任何位置的情况下单击“取消”时，验证器会检查电子邮件字段，在该字段旁边显示无效消息，并终止取消操作。

我在这里找到了一个相关问题:jQuery Validation plugin: disable validation for specified submit buttons 。它看起来和我需要的一模一样。然而它不起作用!我将“取消”CSS 类添加到我的取消按钮，但没有任何效果。

此示例代码演示了我遇到的问题。我在 FF 和 Chrome 中都看到了这种行为。

在此示例中，当我在文本输入中键入无效的电子邮件地址，然后在单击其他任何内容之前单击取消按钮时，验证器会在文本输入旁边显示一条消息，并且永远不会发生取消操作。如果我再次单击“取消”，页面将按预期重新加载。这意味着要取消页面，我实际上必须单击“取消”两次。

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").validate()

        $(".cancel").click(function () {
            location.reload(true)
        })

    })
</script>

<div>
    <form name="myForm" id="myForm" action="index.html">
        <input type="text" class="required email" id="myField" name="myField"/>
        <input type="submit" value="Submit"/>
        <input type="submit" value="Cancel" class="cancel"/>
    </form>
</div>

也很有趣:我尝试运行 jquery 验证文档 ( http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit ) 中找到的演示。当我运行演示时，我无法判断验证是否有效 - 电子邮件字段永远不会被标记为无效，即使我输入 gobbledygook 并单击提交按钮也是如此。我得到的只是一个简单的警报，该警报已添加到表单的submitHandler 中。取消按钮的行为方式相同，因此我无法判断添加取消类是否有效。

我正在使用 FF 和 Chrome 运行此程序。我正在使用 jquery 1.9.1 和 jquery-validate 1.11.4。

Answer 1

As per the accepted answer on the question you reference ，添加 cancel 类只会“抑制”验证。 As you can see in this demo ，取消按钮的行为与另一个提交按钮完全相同，只是绕过了验证。请准确描述单击取消按钮时您希望看到的情况。

否则，也许这就是您想要的:http://jsfiddle.net/25XBT/

jQuery:

$(document).ready(function () {

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

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

HTML:

<form id="myform">
    <input type="text" name="myfield" />
    <input type="submit" />
    <input type="submit" id="cancel" class="cancel" value="cancel" />
</form>

参见:http://docs.jquery.com/Plugins/Validation/Validator/resetForm

编辑:class="cancel" 已被弃用，取而代之的是 formnovalidate 属性。

<input type="submit" id="cancel" formnovalidate="formnovalidate" value="cancel" />