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元素。但是，有一种方法可以解决这个问题：

在您更新的表单中添加<input type='hidden' />，具体取决于列表的状态。换句话说，每次添加或删除列表项时，请设置该输入的值。这有一个明显的缺点;您的验证代码现在分散在两个操作中（添加和删除列表项）。但是，我想你已经有了处理添加/删除的代码，你可以添加一个重新评估上述input状态的常用方法。
需要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");

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

2 个答案: