Kendo UI Validator - 处理具有相同名称属性的输入

时间:2014-11-21 20:33:15

标签: javascript kendo-ui kendo-asp.net-mvc kendo-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个新的&#34;行&#34;进入表格。

我尝试使用:

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

myForm.validate();

我只会在第一个input[name='rowValue']上显示一条错误消息。

JS Fiddle

我怀疑Kendo Validator需要唯一的名称属性才能正确验证。这很遗憾,因为许多后端语言都能够接受相同的名称属性,因为它们会连接这些值或将它们转换为数组或集合(ASP.NET)。

有没有办法让Kendo UI Validator验证具有相同名称属性的表单字段?

1 个答案:

答案 0 :(得分:1)

你的怀疑是正确的。你可以调整你的用例的验证器,如下所示:

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;
};

请注意,此方法有一些简化,因此在某些极端情况下可能会中断。

demo