7

我将 durandal/breeze 与 Knockout 一起使用。

我正在对我的输入进行验证ko.validation。

这里有一个经典：

<input type="text" data-bind="value: myDate, validationOptions: { errorElementClass: 'input-validation-error'}" />

.input-validation-error {
    background-color: #c75b55 !important;
}

这个效果很好：当验证失败时，输入文本框被标记为红色。

现在我想使用 bindingHandlers 代替“简单”value绑定：

<input type="text" data-bind="dateRW: myDate, validationOptions: { errorElementClass: 'input-validation-error'}" />

ko.bindingHandlers.dateRW = {
    //dateRW --> the 'read-write' version used both for displaying & updating dates
    init: function (element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor();            
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var value = $(element).val();
            var dateFormatted = moment.utc(value, "DD/MM/YYYY");
            //if (dateFormatted.isValid())
            if (dateFormatted)
                observable(dateFormatted.toDate())
            else 
                observable(null);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var date = (typeof value !== 'undefined') ? moment.utc(value) : null;
        var dateFormatted = (date != null) ? date.format('DD/MM/YYYY') : '';
        $(element).val(dateFormatted);            
    }
};

通过这个实现，验证工作，我的意思ko.validation.group是运行良好

var validationErrorsCount = ko.computed(function() {
    if (typeof itinerary() == 'undefined') return;
    var validationErrors = ko.validation.group(itinerary());
    return validationErrors().length;
});

但是输入文本框不再标记为红色。似乎“validationOptions”仅适用于值绑定。

有什么办法让我的验证工作？

谢谢。

4

3 回答 3

13

验证框架有用于值绑定的钩子，您需要调用

ko.validation.makeBindingHandlerValidatable("dateRW");

编辑：它不是未定义的 https://jsfiddle.net/it3xl/n7aqjor9/

于 2013-04-29T10:30:19.657 回答
2

查看knockout-validation.js它调用的来源：

makeBindingHandlerValidatable('value')使value绑定自动验证。

您可以尝试添加调用makeBindingHandlerValidatable来注册您的处理程序：

ko.bindingHandlers.dateRW = {
    //dateRW --> the 'read-write' version used both for displaying & updating dates
    init: function (element, valueAccessor, allBindingsAccessor) {
       ...
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
       ...
    }
};

ko.validation.makeBindingHandlerValidatable('dataRW');
于 2013-04-29T10:34:03.597 回答
0

带有空元素的validationMessage绑定。

我不想将文本框标记为红色。有时允许在validationMessage绑定
中使用额外的空标记（span） 。

<input data-bind="datepickerCustom: myDate"/>
<span data-bind="validationMessage: myDate" class="validationMessage"></span>
于 2015-04-19T21:44:53.770 回答