2

我正在使用 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。

4

1 回答 1

9

根据您引用的问题的公认答案，添加一个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" />
于 2013-02-25T18:02:39.357 回答