7

Knockout 验证插件是否有任何选项可以将错误类应用于错误输入的父级或父级父级？如果没有，有人可以建议一种修改淘汰赛验证的方法来做到这一点吗？

请参阅以下小提琴以获取我正在尝试实现的示例。开箱即用剔除验证设置输入的类，但我希望它设置包含控件组的类：

http://jsfiddle.net/fbA4m/1/

看法

<p>Clear the field and tab out of it to "see" the current behaviour - error class is added directly to the input by knockout validation. But I want to add class "error" to control-group containing the input instead of directly to the input.</p>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Field</label>
<div class="controls">
<input type="text" data-bind="value: testField" class="">
</div>
</div>
    <button data-bind="click: setErrorOnControlGroup">Click to see desired effect</button>
</div>

Javascript

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    decorateElement: true,
    errorClass: 'error',
    insertMessages: false,
    parseInputAttributes: true,
    messageTemplate: null
});

var viewModel = {
    testField: ko.observable("123").extend({required: true}),
    setErrorOnControlGroup: function() {
        $("input.error").removeClass("error");
        $(".control-group").addClass("error");
    }
};

ko.applyBindings(viewModel);

样式表（仅供说明 - 我不应该需要它，因为我想使用 twitter 引导样式）

/*NOTE: This is not actually the style I want, it just illustrates the default behaviour of knockout validation*/
input.error {
    background-color: #aaffaa;
}

我问是因为我正在使用 twitter 引导样式，它使用输入的父控件组元素来设置“错误”输入的样式。

4

2 回答 2

3

我调整了互斥锁的小提琴以达到效果。 http://jsfiddle.net/3vGVC/9/。不过还有改进的余地，也许可以指定要应用的 css 类。这里是bindingHandler，可以应用到容器上。

ko.bindingHandlers.validationElement = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var valueIsValid = valueAccessor().isValid();
    if(!valueIsValid) {
        $(element).addClass("error");
    }
    else {
        $(element).removeClass("error");
    }
}

}

于 2013-04-29T21:57:56.110 回答
2

您可以编写自己的绑定。查看validationElement敲除验证源中的绑定源。

于 2013-04-02T05:40:01.743 回答