MVC Jquery Validation DataTable. New Row is not validating

Question

I am devloping an MVC WebApp with html5.

I have a Form (build by Razor, so everything is properly named), as long as I wont add a new row the jquery validation works as a charm.

When I Add a new Row, Jquery does not recognize the new row.

I tried to removed the old validation and add new the one -> No result - $.removeData(form,"validator");form.validate()

I tried somehow to refresh it but it just wont work. I some solutions where the name were duplicated, but this not my problem.

Any Help on this?

1. Initialize my Table

   $("#plantsTable").dataTable({
   "paging": false,
   "searching": false,
   "bInfo": false,
   "fixedHeader": true,
   "columns": [
       { "orderDataType": "dom-text-numeric", "sType": "numeric" },
       { "orderDataType": "dom-text", "sType": "string" },
       { "orderDataType": "dom-select", "sType": "string" },
       { "orderDataType": "dom-checkbox", "sType": "numeric", },
       { "orderDataType": "dom-checkbox", "sType": "numeric", },
       null,
       null,
       null
   ],
   "order": [[1, "asc"]],
   "aoColumnDefs": [{
       "bSortable": false,
       "aTargets": ["no-sort"]
   }]
   

   });

2. Init Validation

   $(selector).validate();
   $(selector).valid();
   $(selector).tooltip(...);
   

3. Add New Row

   addNewRow: function (tableSelector, controller, action, element) { hasChanges = true; var rowCount = $(tableSelector).children('tbody').children('tr').length;

   $.ajax({
       url: "/" + controller + "/" + action,
       type: "POST",
       success: function (data) {
           $(tableSelector).children('tbody').append(data);
           $(element).show();
       },
       data: { "rowCount": rowCount }
   });
   

   }

4. ReValidate (?)

   $(selector).validate();
   $(selector).valid();
   $(selector).tooltip(...);
   

5. Sample HTML (After Adding new Row)

   <form action="/Anlagen" id="plantsForm" method="post" novalidate="novalidate">
     <tr role="row" class="odd">
       <td class="tableInputCell" hidden="">
         <input data-val="true" 
           data-val-number="The field AnlageNrID must be a number." 
           id="Anlagen_2__AnlageNrID" name="Anlagen[2].AnlageNrID"
           readonly="readonly" type="text" value="28" tabindex="-1">
           <span class="field-validation-valid"
            data-valmsg-for="Anlagen[2].AnlageNrID"
            data-valmsg-replace="true" style="display:none"></span>
       </td>
       <td class="tableInputCell sorting_1">
         <input data-val="true"
           data-val-length="Das Feld &quot;Bezeichnung&quot; muss eine Zeichenfolge mit einer maximalen Länge von 30 sein." 
           data-val-length-max="30"
           data-val-required="Das Feld &quot;Bezeichnung&quot; ist erforderlich." 
           id="Anlagen_2__AnlageBez" name="Anlagen[2].AnlageBez"
           style="width:450px" type="text" value="(Alle Anlagen)"
           class="valid">
             <span class="field-validation-valid"
               data-valmsg-for="Anlagen[2].AnlageBez"
               data-valmsg-replace="true" style="display:none"></span>
       </td>
   </tr>
   <tr>
       <td class="tableInputCell" hidden="">
         <input data-val="true"
           data-val-number="The field AnlageNrID must be a number."
           id="Anlagen_3__AnlageNrID" name="Anlagen[3].AnlageNrID" 
           readonly="readonly" type="text" value="">
           <span class="field-validation-valid"
             data-valmsg-for="Anlagen[3].AnlageNrID"
             data-valmsg-replace="true" style="display:none"></span>
       </td>
       <td class="tableInputCell">
         <input data-val="true" 
           data-val-length="Das Feld &quot;Bezeichnung&quot; muss eine Zeichenfolge mit einer maximalen Länge von 30 sein."
           data-val-length-max="30"
           data-val-required="Das Feld &quot;Bezeichnung&quot; ist erforderlich." 
           id="Anlagen_3__AnlageBez" name="Anlagen[3].AnlageBez"
           style="width:450px" type="text" value="">
           <span class="field-validation-valid"
             data-valmsg-for="Anlagen[3].AnlageBez"
             data-valmsg-replace="true" style="display:none"></span>
       </td>
     </tr>
   </form>
   

Answer 1

Fixed it:

function resetFormValidator(formId) {
    $(formId).removeData('validator');
    $(formId).removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(formId);
}