jQuery Validator - Как проверять неформальные элементы?

Question

У меня есть форма, где пользователь может продолжать добавлять элементы в список.Когда они отправляются, чтобы отправить эту страницу, я хочу убедиться, что в этом списке есть элементы (а не отдельные элементы, поскольку они уже были проверены).Каждый элемент добавляется в новую строку таблицы с TR, имеющим дополнительный атрибут «action» ... поэтому он выглядит следующим образом:

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

Я пытался добавить собственный addMethodэто вызвало функцию, которая посчитала бы число строк с действием в качестве атрибута:

$("#tableID").find("tr[action]").length

, и если эта длина больше 0, она возвращает true, в противном случае - false.

Thisотлично работает вне вызовов валидатора, но по какой-то причине он полностью пропускает его.

Я мог бы действительно использовать пример или некоторое представление о том, как заставить его проверять это правило, даже если оно не является элементом формы специально.

Сокращенный код:

* обратите внимание, что у меня уже есть настройки по умолчанию для сообщений, а что нет.

$.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/

Вы можете сделать элемент (1) aнемного проще, если вы используете фреймворк, такой как knockoutjs .Вы могли бы сказать этой платформе, чтобы «наблюдали» ваш список и обновляли ввод автоматически, без необходимости отслеживать его.

Не самый чистый способ решения проблемы, но я видел, как это делалось раньшеи, кажется, работает достаточно хорошо.

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");