7

ノックアウトでデュランダル/ブリーズを使用しています。

を使用して入力の検証に取り組んでいko.validationます。

ここに古典があります：

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

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

これは非常にうまく機能します。検証が失敗した場合、入力テキストボックスは赤でマークされます。

valueここで、「単純な」バインディングの代わりに bindingHandlers を使用したいと思います。

<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

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バインディング
で追加の空のマークアップ (スパン) を使用できる場合があります。

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