Kendo UI Validator — обработка входных данных с идентичными атрибутами имен

В настоящее время у меня есть форма, аналогичная приведенной ниже:

<form action="/" method="post" id="myForm">
    <div class="row">
        <input type="text" name="rowValue" class="rowValue">
    </div>
    <div class="row">
        <input type="text" name="rowValue" class="rowValue">
    </div>
    <div class="row">
        <input type="text" name="rowValue" class="rowValue">
    </div>
    <div class="row">
        <input type="text" name="rowValue" class="rowValue">
    </div>
    <input type="submit" value="Submit">
</form>

Небольшая предыстория: JS используется для добавления X новых строк в форму.

Я пытался использовать:

var myForm = $('#myForm').kendoValidator({
    /* rules/messages go here*/
}).data('kendoValidator');

myForm.validate();

Я получаю только одно сообщение об ошибке, отображаемое на первом input[name='rowValue'].

JS Fiddle

Я подозреваю, что Kendo Validator нуждается в уникальных атрибутах имени для правильной проверки. Это позор, так как многие языки бэкенда имеют возможность принимать идентичные атрибуты имен, поскольку они объединяют значения или преобразуют их в массив или коллекцию (ASP.NET).

Есть ли способ заставить Kendo UI Validator проверять поля формы с идентичными атрибутами имени?


javascript kendo-ui kendo-asp.net-mvc kendo-validator
person Fillip Peyton    schedule 21.11.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваше подозрение верно. Вы можете настроить валидатор для своего варианта использования следующим образом:

kendo.ui.Validator.prototype.validateInput = function (input) {
    input = $(input);

    var that = this,
        template = that._errorTemplate,
        result = that._checkValidity(input),
        valid = result.valid,
        className = ".k-invalid-msg",
        fieldName = (input.attr("name") || ""),
        lbl = input.parent().find("span" + className).hide(),
        messageText;

    input.removeAttr("aria-invalid");

    if (!valid) {
        messageText = that._extractMessage(input, result.key);
        that._errors[fieldName] = messageText;
        var messageLabel = $(template({
            message: messageText
        }));

        that._decorateMessageContainer(messageLabel, fieldName);

        if (!lbl.replaceWith(messageLabel).length) {
            messageLabel.insertAfter(input);
        }
        messageLabel.show();

        input.attr("aria-invalid", true);
    }  
    input.toggleClass("k-invalid", !valid);

    return valid;
};

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

(демонстрация)

person Lars Höppner    schedule 28.11.2014
comment
ОТЛИЧНОЕ решение. Не знаю, почему я не подумал об этом. Спасибо за вашу помощь! - person Fillip Peyton; 28.11.2014