2015-05-01 27 views
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); 
     } 
    } 
}; 

回答

1

你只在其init功能使您date自定義綁定「驗證兼容」,這將在綁定只叫首先在HTML中使用。這就是爲什麼驗證僅適用於第二個輸入。

爲了解決這個問題,你必須將你的init功能的ko.validation.makeBindingHandlerValidatable("date");外面有它後整個裝訂處理程序聲明

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