我有一个表单,用户可以继续将项目添加到列表中.当他们提交此页面时,我想验证此列表中是否包含其中的项目(而不是单个项目,因为它们已经过验证).每个项目都被添加到表格中的新行,其中TR具有“action”的额外属性…所以它看起来像：
<tr action="whatever">...</tr>
我试图做的是添加一个自定义的addMethod,它调用一个函数,该函数将行数作为属性计算：
$("#tableID").find("tr[action]").length
如果该长度大于0,则返回true,否则返回false.
这在验证器调用之外工作正常,但由于某种原因它完全跳过它.
我可以使用一个示例或一些洞察如何使它验证此规则,即使它不是一个特定的表单元素.
按比例缩小的代码：
*请注意,我已经为消息设置了默认设置,而不是.
$.validator.addMethod("validProductList",function (value,element) {
return this.optional(element) || validateProductList();
},"You have no products in your list");
$("#processForm").click(function () {
$("#pageForm").validate({
submitHandler: function () {
$("#errors").hide();
//processPage();
},rules: {
//other rules,validProductList: true
}
});
});
function validateProductList() {
var isValid = false;
var useList = $("#tblAddedProducts").find("tr[action]").length;
if (useList > 0) { isValid = true; }
return isValid;
}
解决方法
这不起作用的原因是因为rules对象期望其子节点是表单字段名称(而不是规则名称).看起来验证无法验证非表单元素.但是,有一种方法可以解决这个问题：
>添加< input type ='hidden'/>到您的表单,您根据列表的状态更新.换句话说,每次添加或删除列表项时,请设置该输入的值.这有一个明显的缺点;您的验证代码现在分散在两个操作中(添加和删除列表项).但是,我想你已经有了处理添加/删除的代码,你可以添加一个重新评估上述输入状态的常用方法.
>输入所需的输入并正常使用.validate().
这是一个非常粗略的工作示例：http://jsfiddle.net/dT6Yd/
如果使用像knockoutjs这样的框架,可以使item(1)更容易一些.您可以告诉该框架“观察”您的列表并自动更新输入而无需跟踪它.
不是处理这个问题的最干净的方法,但我之前已经看到它以这种方式完成,它似乎工作得很好.
