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

Question

我有一个表单，用户可以在其中继续向列表中添加项目。当他们提交此页面时，我想验证此列表中是否确实包含项目（而不是已验证的单个项目）。每个项目都被添加到表中的新行中，TR 具有额外的“动作”属性......所以它看起来像：

<tr action="whatever">...</tr>

我试图做的是添加一个自定义 addMethod，它调用一个函数，该函数将计算带有 action 的行数作为属性：

$("#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

这不起作用的原因是因为规则对象期望其子项是表单字段名称（而不是规则名称）。看起来 validate 无法验证非form 元素。但是，有一种方法可以解决这个问题：

1. 将<input type='hidden' /> 添加到您根据列表状态更新的表单。换句话说，每次添加或删除列表项时，都要设置该输入的值。这有一个明显的缺点；您的验证代码现在分布在两个操作中（添加和删除列表项）。但是，我想您已经有了处理添加/删除的代码，您可以添加一个通用方法来重新评估上述input 的状态。

2. 将input设为必填项并正常使用.validate()。

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

如果您使用像knockoutjs 这样的框架，您可以使项目(1) 更容易一些。您可以告诉该框架“观察”您的列表并自动更新输入，而无需您跟踪它。

这不是处理问题的最干净的方法，但我以前见过这种方法，它似乎工作得很好。

Answer 2

我在源码中找到了解决办法：

return $( this.currentForm )
        .find( "input, select, textarea, [contenteditable]" )

所以 jquery-validation 只接受这些类型的元素。我只是将属性“contenteditable”添加到要验证的元素中，并添加了一个自定义验证器。

<div contenteditable data-rule-raty="true" data-score="0" data-plugin="rating"></div>

$.validator.addMethod("raty-required", function (value, element, regexpr) {
  return $(element).raty("score") >= 0;
}, "Bitte Bewertung abgegeben");