jQuery验证插件。向现有规则添加新规则

debugcn 发表于 Dev

希格斯玻色子

我有使用jQuery验证的项目。这是我的代码：

<script type="text/javascript" src="Scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
<form action="/" id="MyForm" onsubmit="greeting()">
    <input type="checkbox" value="val1"  name="dner" />
    <input type="submit" value="Submit" />
</form>
<script type="text/javascript">
function greeting() {
    return $("#MyForm").valid();
}
$(document).ready(function () {
    $("#MyForm").validate({ onsubmit: true }); //If comment this code line, it work!!!
    $.validator.addMethod("MyFunction", function (value, element) {
        if ($("input:checked").length > 0) { return true } else { alert("Пустое поле"); return false; }
    },
    "");
    $("#MyForm").rules("add", { dner:{ MyFunction :true}});
});
</script>

当我注释一行代码时，它可以工作。这非常重要，因为在我的项目中，我有一套新的验证规则，因此无法重做。如何将新规则添加到现有规则？

活泼的

您的代码：

//If comment this code line, it work!!!
$("#MyForm").validate({ onsubmit: true });

如果您将整行注释掉，则将删除插件的初始化方法！

这是一个有争议的问题，因为您的代码在两种情况下均无法正常工作。看到这里或这里。

您必须纠正以下问题：

1）onsubmit: true已经是默认行为，因此通过将其设置为true，您将破坏插件。如果您希望在单击submit按钮后进行验证，则只需忽略此选项。

请参阅文档onsubmit：

onsubmit（默认值：true）：
在提交时验证表单。设置为false仅使用其他事件进行验证。设置为“功能”可自行决定何时运行验证。布尔值true不是有效值。

2）您的代码：$("#MyForm").rules("add"...。

您不应该将该.rules()方法附加到form。您仅将其附加到field元素...

$('input[name="dner"]').rules("add", {
    MyFunction: true
});

请参阅文档。

要将此方法一次应用于多个字段，请使用jQuery .each()...

$('input[type="checkbox"]').each(function() {
    $(this).rules("add", {
        MyFunction: true
    });
});

3）您不需要内联submit处理程序：onsubmit="greeting()"。使用jQuery时，完全不需要内联JavaScript。此外，submit处理程序会干扰插件的内置submit处理程序。如果您submit在使用此插件时需要在事件上执行某些操作，请使用submitHandler回调函数...

submitHandler: function(form) {
    // fire this code when a valid form is submitted
    return false;  // prevent default form action, e.g. when using ajax()
}

如果您需要在表单无效时触发代码，请使用invalidHandler回调...

invalidHandler: function(event, validator) {
    // fire this code when an invalid form is submitted
}

有关示例，请参见文档。

4）您的自定义方法可以浓缩...

$.validator.addMethod("MyFunction", function (value, element) {
   return ($("input:checked").length > 0) 
}, "Пустое поле");

如果您希望使用而alert()不是label消息，则可以将其放回去。尽管我不建议将alert()用作任何现代设计的一部分。

应用了所有更改的DEMO：http : //jsfiddle.net/sqKta/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-3

我来说两句

0条评论

登录后参与评论

来自分类Dev