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

【问题标题】：Knockout validation only working on one of two date fields敲除验证仅适用于两个日期字段之一
【发布时间】：2015-07-11 17:01:28
【问题描述】：

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

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

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

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

【问题讨论】：

标签： asp.net-mvc-4 knockout.js knockout-validation

【解决方案1】：

您仅在其 init 函数中使您的 date 自定义绑定“验证兼容”，该函数仅在 HTML 中首次使用绑定时才会调用。这就是为什么验证仅适用于 second 输入。

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

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

【讨论】：