title: Jquery dynamic Adding Row to HtmlDatatable not validating?
body: <p>I have a form which shows <code>Center Details</code> and its <code>PartnerDetails</code> in the same page.During the edit page scenario I have bound all the current partner details along with the provision to <code>Add New Row</code> if new <code>Partners</code>are to be added.</p>
  
  <p>The <code>jquery unobstrusive validation</code> shows successfully for the currently bounded items,but it new row is added no validation is performed for the newly added row.</p>
  
  <p><strong>HTML DataTable is</strong></p>
  
  <pre><code>&lt;table id="tblPartnerDetails" class="table table-bordered table-hover"&gt;
    &lt;thead&gt;
         &lt;tr&gt;
            &lt;th&gt;&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;ContactNo&lt;/th&gt;
            &lt;th&gt;EmailId&lt;/th&gt;
            &lt;th&gt;Alt ContactNo&lt;/th&gt;
            &lt;th&gt;Alt EmailId&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
         &lt;/tr&gt;
         &lt;/thead&gt;
             &lt;tbody&gt;
                 @for (int i = 0; i &lt; Model.CenterCodePartnerDetail.Count; i++)
                 {
                    &lt;tr&gt;
                        @Html.HiddenFor(m =&gt; Model.CenterCodePartnerDetail[i].Id)
                        &lt;td class="slno"&gt;
                             @Convert.ToInt32(i + 1)
                        &lt;/td&gt;
                        &lt;td&gt;
                             @Html.TextBoxFor(m =&gt; m.CenterCodePartnerDetail[i].PartnerName,
                             new { @class = "form-control PartnerName", @placeholder = "PartnerName" })
                             @Html.ValidationMessageFor(m =&gt; m.CenterCodePartnerDetail[i].PartnerName)
  
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(m =&gt; m.CenterCodePartnerDetail[i].ContactNumber,
                            new { @class = "form-control ContactNumber numberOnly", @placeholder = "ContactNumber", @id = "txtContactNumber" })
                            @Html.ValidationMessageFor(m =&gt; m.CenterCodePartnerDetail[i].ContactNumber)
  
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(m =&gt; m.CenterCodePartnerDetail[i].EmailId,
                           new { @class = "form-control EmailId", @placeholder = "Email", @id = "txtEmailId" })
                            @Html.ValidationMessageFor(m =&gt; m.CenterCodePartnerDetail[i].EmailId)
  
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(m =&gt; m.CenterCodePartnerDetail[i].AltContactNumber,
                             new { @class = "form-control AltContactNumber numberOnly", @placeholder = "AltContactNo", @id = "txtAltContactNo" })
                            @Html.ValidationMessageFor(m =&gt; m.CenterCodePartnerDetail[i].AltContactNumber)
  
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(m =&gt; m.CenterCodePartnerDetail[i].AltEmailId,
                           new { @class = "form-control AltEmailId", @placeholder = "AltContactNo", @id = "txtAltEmailId" })
                            @Html.ValidationMessageFor(m =&gt; m.CenterCodePartnerDetail[i].AltEmailId)
  
                        &lt;/td&gt;
                  &lt;/tr&gt;
                 }
            &lt;/tbody&gt;
            &lt;tfoot&gt;
                  &lt;tr&gt;
                     &lt;th colspan="6"&gt;
                          &lt;button  id="btnAddRow" class="btn btn-sm btn-info pull-right "&gt;
                          &lt;i class="fa  fa-plus"&gt;&lt;/i&gt;
                                                  Add Row
                          &lt;/button&gt;
                     &lt;/th&gt;
                  &lt;/tr&gt;
          &lt;/tfoot&gt;       
  </code></pre>
  
  <p></p>
  
  <p><strong>Jquery AddRow function is</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).on("click", "#btnAddRow", function(e) {
  
    var rowCount = $('#tblPartnerDetails tbody tr').length;
    AddRow(rowCoun);
    return false;
  
  });
  
  var AddRow = function(rows) {
  
  
  
    var slno = parseInt(rows + 1);
    var i = parseInt(rows);
  
    var $row = $('&lt;tr/&gt;');
    $row.append(' &lt;td class="slno"&gt;' + slno + '&lt;/td&gt;');
  
    $row.append(' &lt;td&gt;&lt;input name="CenterCodePartnerDetail[' + i + '].PartnerName" type="text" class="form-control capitalise  PartnerName valid" data-val="true" data-val-required="PartnerName" placeholder="PartnerName"  /&gt;'
   + '&lt;span class="field-validation-valid spanPartnerName" data-valmsg-for="CenterCodePartnerDetail[' + i + '].PartnerName" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/td&gt;');
  
    $row.append(' &lt;td&gt;&lt;input name="CenterCodePartnerDetail[' + i + '].ContactNumber" type="text" class="form-control  ContactNumber numberOnly" data-val="true" data-val-required="ContactNumber" placeholder="ContactNo" id="txtContactNumber" /&gt;' 
  + '&lt;span class="field-validation-valid spanContactNumber" data-valmsg-for="CenterCodePartnerDetail[' + i + '].ContactNumber" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/td&gt;');
  
    $row.append(' &lt;td&gt;&lt;input name="CenterCodePartnerDetail[' + i + '].EmailId" type="text" class="form-control  EmailId" data-val="true" data-val-required="EmailId" data-val-email="Invalid EmailId" placeholder="EmailId" id="txtEmailId" /&gt;' 
  + '&lt;span class="field-validation-valid spanEmailId" data-valmsg-for="CenterCodePartnerDetail[' + i + '].EmailId" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/td&gt;');
  
    $row.append(' &lt;td&gt;&lt;input name="CenterCodePartnerDetail[' + i + '].AltContactNumber" type="text" class="form-control  AltContactNumber numberOnly" data-val="true" data-val-required="AltContactNumber" placeholder="AltContactNo" id="txtAltContactNumber" /&gt;' 
  + '&lt;span class="field-validation-valid spanAltContactNumber" data-valmsg-for="CenterCodePartnerDetail[' + i + '].AltContactNumber" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/td&gt;');
  
    $row.append(' &lt;td&gt;&lt;input name="CenterCodePartnerDetail[' + i + '].AltEmailId" type="text" class="form-control  AltEmailId"  data-val="true" data-val-required="AltContactNumber" data-val-email="Invalid EmailId" placeholder="AltEmailId" id="txtAltContactNumber" /&gt;' 
  + '&lt;span class="field-validation-valid spanAltEmailId" data-valmsg-for="CenterCodePartnerDetail[' + i + '].AltEmailId" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/td&gt;');
  
    $row.append('&lt;td&gt;&lt;div class="tools"&gt;&lt;a class="btn rowDelete"&gt;&lt;i class="fa  fa-trash-o " style="color:red"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;');
  
    $("#tblPartnerDetails tbody tr:last").after($row);
  
  
  
  
  
  };
  </code></pre>
  
  <p><strong>Center Class is</strong></p>
  
  <pre><code>public class CenterCodePartnerDetailsMetaData
  {
      [Required(ErrorMessage = "PartnerName", AllowEmptyStrings = false)]
      public string PartnerName { get; set; }
  
      [Required(ErrorMessage = "ContactNumber", AllowEmptyStrings = false)]
      public string ContactNumber { get; set; }
  
      [Required(ErrorMessage = "EmailId", AllowEmptyStrings = false)]
      [EmailAddress(ErrorMessage="Invalid EmailId")]
      public string EmailId { get; set; }
  
      [Required(ErrorMessage = "AltContactNumber", AllowEmptyStrings = false)]
      public string AltContactNumber { get; set; }
  
      [Required(ErrorMessage = "AltEmailId", AllowEmptyStrings = false)]
      [EmailAddress(ErrorMessage = "Invalid EmailId")]
      public string AltEmailId { get; set; }
  
  
  }
  </code></pre>