Jquery dynamic Adding Row to HtmlDatatable not validating?

Question

I have a form which shows Center Details and its PartnerDetails in the same page.During the edit page scenario I have bound all the current partner details along with the provision to Add New Row if new Partnersare to be added.

The jquery unobstrusive validation shows successfully for the currently bounded items,but it new row is added no validation is performed for the newly added row.

HTML DataTable is

<table id="tblPartnerDetails" class="table table-bordered table-hover">
  <thead>
       <tr>
          <th></th>
          <th>Name</th>
          <th>ContactNo</th>
          <th>EmailId</th>
          <th>Alt ContactNo</th>
          <th>Alt EmailId</th>
          <th></th>
       </tr>
       </thead>
           <tbody>
               @for (int i = 0; i < Model.CenterCodePartnerDetail.Count; i++)
               {
                  <tr>
                      @Html.HiddenFor(m => Model.CenterCodePartnerDetail[i].Id)
                      <td class="slno">
                           @Convert.ToInt32(i + 1)
                      </td>
                      <td>
                           @Html.TextBoxFor(m => m.CenterCodePartnerDetail[i].PartnerName,
                           new { @class = "form-control PartnerName", @placeholder = "PartnerName" })
                           @Html.ValidationMessageFor(m => m.CenterCodePartnerDetail[i].PartnerName)

                      </td>
                      <td>
                          @Html.TextBoxFor(m => m.CenterCodePartnerDetail[i].ContactNumber,
                          new { @class = "form-control ContactNumber numberOnly", @placeholder = "ContactNumber", @id = "txtContactNumber" })
                          @Html.ValidationMessageFor(m => m.CenterCodePartnerDetail[i].ContactNumber)

                      </td>
                      <td>
                          @Html.TextBoxFor(m => m.CenterCodePartnerDetail[i].EmailId,
                         new { @class = "form-control EmailId", @placeholder = "Email", @id = "txtEmailId" })
                          @Html.ValidationMessageFor(m => m.CenterCodePartnerDetail[i].EmailId)

                      </td>
                      <td>
                          @Html.TextBoxFor(m => m.CenterCodePartnerDetail[i].AltContactNumber,
                           new { @class = "form-control AltContactNumber numberOnly", @placeholder = "AltContactNo", @id = "txtAltContactNo" })
                          @Html.ValidationMessageFor(m => m.CenterCodePartnerDetail[i].AltContactNumber)

                      </td>
                      <td>
                          @Html.TextBoxFor(m => m.CenterCodePartnerDetail[i].AltEmailId,
                         new { @class = "form-control AltEmailId", @placeholder = "AltContactNo", @id = "txtAltEmailId" })
                          @Html.ValidationMessageFor(m => m.CenterCodePartnerDetail[i].AltEmailId)

                      </td>
                </tr>
               }
          </tbody>
          <tfoot>
                <tr>
                   <th colspan="6">
                        <button  id="btnAddRow" class="btn btn-sm btn-info pull-right ">
                        <i class="fa  fa-plus"></i>
                                                Add Row
                        </button>
                   </th>
                </tr>
        </tfoot>

Jquery AddRow function is

$(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 = $('<tr/>');
  $row.append(' <td class="slno">' + slno + '</td>');

  $row.append(' <td><input name="CenterCodePartnerDetail[' + i + '].PartnerName" type="text" class="form-control capitalise  PartnerName valid" data-val="true" data-val-required="PartnerName" placeholder="PartnerName"  />'
 + '<span class="field-validation-valid spanPartnerName" data-valmsg-for="CenterCodePartnerDetail[' + i + '].PartnerName" data-valmsg-replace="true"></span> </td>');

  $row.append(' <td><input name="CenterCodePartnerDetail[' + i + '].ContactNumber" type="text" class="form-control  ContactNumber numberOnly" data-val="true" data-val-required="ContactNumber" placeholder="ContactNo" id="txtContactNumber" />' 
+ '<span class="field-validation-valid spanContactNumber" data-valmsg-for="CenterCodePartnerDetail[' + i + '].ContactNumber" data-valmsg-replace="true"></span> </td>');

  $row.append(' <td><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" />' 
+ '<span class="field-validation-valid spanEmailId" data-valmsg-for="CenterCodePartnerDetail[' + i + '].EmailId" data-valmsg-replace="true"></span> </td>');

  $row.append(' <td><input name="CenterCodePartnerDetail[' + i + '].AltContactNumber" type="text" class="form-control  AltContactNumber numberOnly" data-val="true" data-val-required="AltContactNumber" placeholder="AltContactNo" id="txtAltContactNumber" />' 
+ '<span class="field-validation-valid spanAltContactNumber" data-valmsg-for="CenterCodePartnerDetail[' + i + '].AltContactNumber" data-valmsg-replace="true"></span> </td>');

  $row.append(' <td><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" />' 
+ '<span class="field-validation-valid spanAltEmailId" data-valmsg-for="CenterCodePartnerDetail[' + i + '].AltEmailId" data-valmsg-replace="true"></span> </td>');

  $row.append('<td><div class="tools"><a class="btn rowDelete"><i class="fa  fa-trash-o " style="color:red"></i></a></div></td>');

  $("#tblPartnerDetails tbody tr:last").after($row);





};

Center Class is

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


}

You need to reparse the validator after adding dynamic content - refer [this answer](http://stackoverflow.com/questions/29837547/set-class-validation-for-dynamic-textbox-in-a-table/29838689#29838689) — , Oct 21 '15 at 07:17
Side note: `var rowCount = $('#tblPartnerDetails tbody tr').length;` will fail if your add say 3 rows (the last indexer is `2`) then delete say the 2nd one, then add another (it will also have an indexer of `2`) — , Oct 21 '15 at 07:19
What a silly mistake? The reason why I say is that I have gone through your link earlier and has implemented `validation reparsing` during the `Add method` of the `Centre ` but forgot to implement it in `Edit method`.Regarding your side note what i am doing while deleting is iterating over the `table body row` and resetting the `name` once again..Forgot to say `Thanks for the reply mate`. — ksg, Oct 21 '15 at 08:02
Not very efficient to have to iterate the collection each time. Consider using `var index = (new Date()).getTime();` and a hidden input for `CenterCodePartnerDetail.Index` — , Oct 21 '15 at 08:14

Jquery dynamic Adding Row to HtmlDatatable not validating?

0 Answers0