ValidationOptions does not work with custom bindHandlers

Question

I am using durandal / breeze with knockout.

I am working on validating my inputs with ko.validation .

Here is a classic:

 <input type="text" data-bind="value: myDate, validationOptions: { errorElementClass: 'input-validation-error'}" /> .input-validation-error { background-color: #c75b55 !important; } 

This works very well: when the check fails, the input text box is marked in red.

Now I would like to use bindHandlers instead of the “simple” value binding:

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

Validation works with this implementation, I mean that ko.validation.group works well

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

But the input text box is no longer marked in red. It seems that "validationOptions" only works with value binding.

Can I perform my check?

Thanks.

Answer 1

There are bindings in the validation framework for value binding, you need to call

 ko.validation.makeBindingHandlerValidatable("dateRW"); 

edit: its not undefined https://jsfiddle.net/it3xl/n7aqjor9/

Answer 2

Looking at the source of knockout-validation.js , it calls:

makeBindingHandlerValidatable('value') so that the value binding is automatically checked.

You can try adding a call to makeBindingHandlerValidatable to register the handler:

 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 binding to an empty element.

I do not want the text box to be marked in red.
Sometimes it is allowed to use additional empty span with validationMessage binding.

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