knockout.js - Adding validation to knockout -

i'm trying use jquery validation. i'm loading list of items via ajax, load knockout model. bind validation items. problem validation messages show on first input box only. doing wrong?

$(document).ready(function () {         var viewmodel = new viewmodel();         viewmodel.load();         ko.applybindings(viewmodel);          $('#list').validate(); }); 

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

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

"the problem validation messages show on first input box only. doing wrong?"

based on code you've shown, jquery validate should not working @ all.

you can attach .validate() method form, not input element.

$(document).ready(function() {      $('#list').validate(); // initialize plugin on form  }); 

note: name attribute how plugin keeps track of fields, repeating names result in describe elements skipped. thought saw name repeated in first version of html.

---

you cannot attach .validate() method form element not yet exist. if ajax() loading html form, call .validate() right after form's html loaded.

the same place commented out call .validate(), except time it's attached form, not input element.

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

---

edit 2:

stressing original "note" above. must not repeat name attribute or plugin fail. there no workaround. must ensure every input contains unique name.

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