javascript - Knockout.js rows won't validate in MVC -

i'am using mvc, c#, razor, , knockout.js

models > skuprice.cs

[required] [display(name = "srp")] public decimal srp { get; set; } 

controllers > skupricecontroller.cs

public actionresult create(int id = 1) {     return view(); }  [httppost] public actionresult create(list<skuprice> skuprices) {     if (modelstate.isvalid) {         foreach (skuprice skuprice in skuprices)          {             db.skuprices.addobject(skuprice);             db.savechanges();         }     } } return view(); 

views > skuprice > create.cshtml

<table>     <thead>         <tr>             <th>                 @html.labelfor(model => model[0].srp)             </th>             <th>             </th>         <tr>         <tr>             <td>                 <input class="form-control" data-val="true" data-val-number="the field srp must number."                     data-val-required="the srp field required." name="[0].srp" type="number" value="0" step="0.25">                 <span class="help-block"><span class="field-validation-valid" data-valmsg-for="[0].srp"                     data-valmsg-replace="true"></span></span>             </td>             <td>                 <input type="button" onclick="" value="add" class="btn btn-primary" data-bind="click: addprice">             </td>         </tr>     </thead>     <tbody data-bind="foreach: skuprice">         <td>             <input class="form-control" data-val="true" data-val-number="the field srp must number."                 data-val-required="the srp field required." type="number" value="0" step="0.01" data-bind="attr: { name: '[' + ($index() + 1) + '].srp'}">             <span class="help-block"><span class="field-validation-valid" data-valmsg-replace="true"                 data-bind="attr: { 'data-valmsg-for': '[' + ($index() + 1) + '].srp'}"></span>             </span>         </td>         <td>         <i class="fa fa-close" data-bind="click: $parent.removeprice" style="cursor: pointer; color: red;"></i>         </td>     </tbody> </table> <input type="submit" value="save" name="save" class="btn btn-primary" /> 

scripts > main.js

function viewmodel() {     var self = this;      self.skuprice = ko.observablearray([]);      self.addprice = function () {         self.skuprice.push({ count: "" });     };      self.removeprice = function () {         self.skuprice.remove(this);     }; } ko.applybindings(new viewmodel()); 

when enter non-number in first row , click save validated, when add second row , enter non-number value doesn't validate other rows except first row. problem this?

seems data-val in <input type="text" data-val="true" /> not working?

i think happening when add new item skuprice array, knockout pushes new <td> dom, new dom element has not had mvc unobstrusive validation applied it. not expert mvc, try adding line addprice:

self.addprice = function () {     self.skuprice.push({ count: "" });     $.validator.unobtrusive.parse('#yourformselector') }; 

where of course #yourformselector jquery selector <form> element, can't see in html.

as aside, spotted have no <tr> inside <tbody> - deliberate? might more normal:

<tbody data-bind="foreach: skuprice">     <tr>         <td>             inputs...         </td>         <td>             close link...         </td>     </tr> </tbody>