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

Question

我正在使用jquery validate插件进行表单验证.我看到了取消功能的奇怪之处.我有一个包含一个电子邮件字段,一个提交按钮和一个取消按钮的表单.当我在电子邮件字段中键入不完整的地址,然后单击取消时,验证程序将检查电子邮件字段,显示该字段旁边的无效邮件,并终止取消操作.

我在这里找到了一个相关的问题:jQuery Validation插件:禁用指定提交按钮的验证.它看起来完全像我需要的.但它不起作用!我将"取消"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 validate文档中的演示(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

根据您引用的问题的接受答案,添加cancel类仅"抑制"验证.正如您在本演示中所看到的,取消按钮的行为与另一个提交按钮完全相同,只是绕过了验证.请单击取消按钮时准确描述您想要看到的内容.

否则,也许这就是你想要的: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" />