Set class valid为表中的动态文本框设置类验证ation for dynamic textbox in a table

您没有data-val在文本框或用于显示验证消息的占位符元素中包括必需的属性，这些属性用于jquery.validate.unobtrusive.js进行客户端验证。此外，您当前的实现方式不允许用户删除最后一行以外的任何内容，这可以通过为索引器包含隐藏输入来解决，该隐藏输入允许将非连续索引器发布并绑定到您的集合。

首先，向ClsTargetInfo您的TargetInfo媒体资源添加一个默认对象，然后在视图中生成其html

<table id="table"> // add an id attribute  <thead>.....</thead>  <tbody is="tablebody"> // add an id attribute    for(int i = 0; i < Model.TargetInfo.Count; i++)    {      <tr>        <td>          @Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_U, new { id="", @ }) // remove the unnecessary id attribute          @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_U)          // Add the following hidden input to only one column in the row          <input type="hidden" name="TargetInfo.Index" value=@i />        </td>        <td>          @Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_V, new { id="", @ }) // remove the unnecessary id attribute          @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_V)        </td>        .... // other columns      </tr>    }  </tbody></table>

然后检查它为

<tr>

<tr>  <td>    <input data-val="true" data-val-required="The TargetColor_U field is required" name="TargetInfo[0].TargetColor_U" type="text" value="">    <span  data-valmsg-for="TargetInfo[i].TargetColor_U" data-valmsg-replace="true"></span>    <input type="hidden" name="TargetInfo.Index" value="0" />  </td>  ....</tr>

并将其复制到放置在 form标记之外的隐藏元素内，并将索引器的所有实例替换为虚拟字符，从而name=”TargetInfo[0].TargetColor_U”变为name=”TargetInfo[#].TargetColor_U”），还替换value隐藏输入的属性，从而value=”0”使其成为value=”#”

<table id="newrow" >  .... // copy the tr element and its contents here</table>

然后脚本看起来像

var form = $('form'); // or use the id if you have given the form an idvar newrow= $('#newrow');var tablebody = $('#tablebody'); // modify to suit your id$("#btnAddTarget").click(function() {  var index = (new Date()).getTime(); // unique indexer  var clone = newrow.clone(); // clone the new row  clone.html($(clone).html().replace(/#/g, index)); // update the indexer of the clone  var row = clone.find('tr');  tablebody.append(row); // add the new row to the table  // Reparse the validator  form.data('validator', null);  $.validator.unobtrusive.parse(form);});

旁注：

非侵入式验证通过在data-val首次呈现表单时解析属性来工作。添加动态内容时，有必要按照脚本的最后两行中的指示重新解析验证器。
为索引器添加隐藏输入后，您可以删除集合中的任何行，因此不再需要删除“删除”按钮，这将为用户带来更好的体验。
而是使用内联样式，例如，应使用css而不是，而应#table td { padding: 0; }在.css文件中使用
纯粹在客户端添加行可提供最佳性能，但难以维护。如果在属性上添加或更改任何验证属性（例如，您以后可能会添加 [StringLength]属性），则需要更新html以适合。作为替代方案，您可以考虑使用 BeginCollectionItem帮助器，这意味着您拥有一个局部视图（代表一个表行）。对于现有项，您可以 对新行foreach使用@Html.Partial()和循环，并使用ajax调用返回部分视图的控制器方法，并更新DOM。