validationOptions不使用自定义bindingHandlers工作(validatio

我使用迪朗达尔/微风淘汰赛。

我正在确认我与输入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”与价值唯一的工作结合。

任何方式有我的审定工作？

谢谢。

Answer 1:

验证框架具有价值挂钩结合，您需要调用

ko.validation.makeBindingHandlerValidatable("dateRW");

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

Answer 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');

Answer 3:

validationMessage一个空元件结合。

我不想有红色标记的文本框中。
有时它允许使用一个额外的空标记（跨度）与validationMessage结合。

<input data-bind="datepickerCustom: myDate"/>
<span data-bind="validationMessage: myDate" class="validationMessage"></span>

文章来源: validationOptions not working with custom bindingHandlers