jQuery Validation插件.向现有添加新规则

Question

我有使用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>

当我评论一行代码时,它可以工作.这非常重要,因为在我的项目中,我有一套新的验证规则,我无法重新制作它.如何向现有规则添加新规则？

Answer 1

你的代码:

//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()任何现代设计的一部分.

应用所有更改的演示:http: //jsfiddle.net/sqKta/