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" />

如何在取消时抑制jquery验证？

1 个答案: