Добавление проверки для нокаута

Question

Я пытаюсь использовать проверку jquery. Я загружаю список элементов через ajax, загружаю свою модель нокаута. Я хотел бы привязать проверку к этим элементам. Проблема в том, что сообщения проверки правильности отображаются только в первом поле ввода. Что я делаю не так?

$(document).ready(function() { 
     var viewModel = new ViewModel(); 
     viewModel.load(); 
     ko.applyBindings(viewModel); 

     $('#list').validate(); 
}); 

Тогда в моих ViewModel:

self.load = function (selected) { 
     $.ajax({ 
      type: "POST", 
      url: myUrl, 
      data: ko.toJSON({ type: self.url(), customerNumbers: selected }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      beforeSend: function() { 
       $(".demo-tbl").block({ message: "Loading..." }); 
      }, 
      complete: function() { 
       $(".demo-tbl").unblock(); 
       // COMMENTED OUT $("input.percent-text").valid(); // validator 
      }, 
      success: function (data) { 
       ko.mapping.fromJS(data, {}, self); 
      }, 
      error: function (err) { 
       alert(err.status + " - " + err.statusText); 
      } 
     }); 
    }; 

Вынесено HTML:

      <form id="list"> 
          <table class="demo-tbl" data-bind='visible: List().length > 0'> 
           <thead> 
           </thead> 


<tbody data-bind="foreach: List"> 
    <tr class="tbl-item" data-bind="css: HasDiscount"> 
     <td> 
      <dl> 
       <dt class="like" data-bind="text: CustomerName"></dt> 
       <dd>Customer Number: <span data-bind="text: CustomerNumber"></span></dd> 
      </dl> 
     </td> 
     <td> 
      <span class="label label-sm label-warning" data-bind="css: HasDiscount, text: $root.DiscountListType"></span> 
     </td> 
     <td> 
      <dl> 
       <dt class="like">Activation Date:</dt> 
       <dd data-bind="text: moment(ActivationDate()).format('LLL')"></dd> 
      </dl> 
     </td> 
     <!-- ko if: $parent.DiscountListType() == "DiscountOverwrite" --> 
     <td class="action"> 
      <input class="required number percent-text" name="percent" data-bind="numeric: Percent, value: Percent, event: { keypress: $root.update, blur: $root.update }" type="number" min="1" max="100" oninput="maxlength(this)" maxlength="3" /> 
     </td> 
     <!-- /ko --> 
     <td class="checkbox-cell"> 
      <button class="btn action" type="button" data-bind="click: $root.action, css: HasDiscount"></button> 
     </td> 
    </tr> 
</tbody> 

          </table> 
         </form> 

EDIT 1:

... 
       complete: function() { 
        $(".demo-tbl").unblock(); 
        $('#list').validate(); 
       }, 
... 
$(document).ready(function() { 
    if ($(".demo-tbl").length > 0) { 
     var viewModel = new ViewModel(); 
     viewModel.load(); 
     ko.applyBindings(viewModel); 
    } 
}); 

Answer 1

«Проблема заключается в том, что беспорядок проверки возраста отображаются только в первом окне ввода. Что я делаю не так?»

На основе кода вы показали, JQuery Validate не должен работать на всех.

Вы можете только прикрепить метод .validate() к form, а не на вход . элемент

$(document).ready(function() { 

    $('#list').validate(); // initialize plugin on your form 

}); 

Примечание: атрибут name как плагин отслеживает поля, таким образом, повторение имен приведет к чему-то, как вы описали, где некоторые элементы пропускаются я думал, что я увидел.повторяется в первой версии вашего HTML.

---

Вы не можете прикреплять метод .validate() к form элементу, который еще не существует. Если ваш ajax() загружает HTML-код для form, тогда позвоните .validate() сразу после того, как HTML-код формы успешно загружен.

В том же месте вы прокомментировали свой звонок до .validate(), за исключением случаев, когда он прикреплен к form, а не к элементу ввода.

self.load = function (selected) { 
    $.ajax({ 
     .... 
     complete: function() { 
      $(".demo-tbl").unblock(); 
      $('#list').validate(); // initialize validate plugin 
     }, 
     .... 
    }); 
}; 

---

EDIT 2:

подчеркивая мое первоначальное "примечание" выше. Вы должны NOT повторить a name атрибут или плагин не сработает. Нет обходного пути. Вы должны убедиться, что каждый вход содержит уникальныйname.

name="percent[1]" 
name="percent[2]" 
name="percent[3]" 
....