jQuery Validator - 如何验证非表单项？

Question

我有一个表单,用户可以继续将项目添加到列表中.当他们提交此页面时,我想验证此列表中是否包含其中的项目(而不是单个项目,因为它们已经过验证).每个项目都被添加到表格中的新行,其中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;
}

Answer 1

这不起作用的原因是因为rules对象期望其子节点是表单字段名称(而不是规则名称).看起来验证无法验证非form元素.但是,有一种方法可以解决这个问题:

1. <input type='hidden' />根据列表的状态添加您更新的表单.换句话说,每次添加或删除列表项时,请设置该输入的值.这有一个明显的缺点; 您的验证代码现在分散在两个操作中(添加和删除列表项).但是,我想你已经有了处理添加/删除的代码,你可以添加一个重新评估上述状态的常用方法input.

2. 做到input需要并.validate()正常使用.

这是一个非常粗略的工作示例:http://jsfiddle.net/dT6Yd/

如果你使用像knockoutjs这样的框架,你可以使item (1)更容易一些.您可以告诉该框架"观察"您的列表并自动更新输入,而无需您跟踪它.

不是处理问题的最干净的方法,但我之前已经看到它以这种方式完成并且似乎运行良好.