0
我正在使用基因敲除驗證,並且錯誤類正在添加到EndDate字段,但不會在StartDate字段不爲空時添加。該班造成該領域有一個紅色的背景。我看不出兩個領域有什麼不同。我的其他網頁上也出現了類似的情況。敲除驗證只能在兩個日期字段中的一個上工作
經過進一步調查,我發現它始終是頁面上的第一個日期字段不起作用。如果我註釋掉第一個,那麼第二個停止工作。
**編輯:我加入這上面的第一個日期字段一個黑客
<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>
這裏是我們的custome日期裝訂處理器
// 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);
}
}
};