敲除验证仅适用于两个日期字段之一

Question

我正在使用敲除验证，错误 class 被添加到 EndDate 字段而不是 StartDate 字段（当它不为空时）。 class 导致该字段具有红色背景。我看不出这两个领域有什么区别。类似的事情也发生在我的其他页面上。

经过进一步调查，我意识到总是页面上的第一个日期字段不起作用。如果我注释掉第一个，那么第二个将停止工作。

**编辑：作为黑客，我在第一个日期字段上方添加了这个

<input id="StartDate2"  style="width: 140px;" type="hidden" data-bind="date: startDate">

它有效......但感觉真的不对。**

我在视图模型的开头有这个

        ko.validation.init({
            insertMessages: false,
            decorateElement: true,
            errorElementClass: "input-validation-error"
        });

来自我的模型

    startDate:      KnockoutObservable<Date> = ko.observable(null).extend({ required: { message: "Please enter a start date." }, simpleDate: { message: "Please enter a valid start date." } });
    endDate:        KnockoutObservable<Date> = ko.observable(null).extend({ required: { message: "Please enter an end date." }, simpleDate: { message: "Please enter a valid end date." } });

从视图

    <li>
        <label for="StartDate" class="required_label">Start Date</label>
        <input id="StartDate" style="width: 140px;" type="text" data-bind="date: startDate, valueUpdate: 'afterkeydown', class:{'input-validation-error':(!startDate.isValid() && showErrors())}" ">
    </li>
    <li>
        <label for="EndDate" class="required_label">End Date</label>
        <input id="EndDate" style="width: 140px;" type="text" data-bind="date: endDate">
    </li>

这是我们的客户日期绑定处理程序

// mm/dd/yyyy format
ko.bindingHandlers.date = {
    init: (element, valueAccessor) => {
        $(element).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });

        ko.utils.registerEventHandler(element, "change", () => {
            var value = valueAccessor();

            if (moment(element.value).isValid()) {
                value(element.value);
            } else {
                value(null);
            }
        });

        ko.validation.makeBindingHandlerValidatable("date");
    },
    update: (element, valueAccessor, allBindingsAccessor) => {
        var value = valueAccessor();
        var allBindings = allBindingsAccessor();
        var valueUnwrapped: any = ko.utils.unwrapObservable(value);
        var pattern = allBindings.format || "MM/DD/YYYY";
        var output = null;

        if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
            output = moment(valueUnwrapped).format(pattern);
        }



        if ($(element).is("input") === true) {
            $(element).val(output);
        } else {
            $(element).text(output);
        }
    }
};

Answer 1

您仅在其 init 函数中创建 date 自定义绑定 "validation compatible"，该函数仅在 HTML 中首次使用绑定时调用。这就是验证仅适用于 second 输入的原因。

为了解决这个问题，您必须将 ko.validation.makeBindingHandlerValidatable("date"); 移到 init 函数之外，并将其放在整个绑定处理程序声明之后

ko.bindingHandlers.date = { 
   //...
}; 
ko.validation.makeBindingHandlerValidatable("date");

敲除验证仅适用于两个日期字段之一

Knockout validation only working on one of two date fields

asp.net-mvc-4

knockout.js

knockout-validation