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?

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"]
}]

});

Init Validation

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

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

}

ReValidate (?)

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

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>

score 0 · Accepted Answer · answered Feb 16 '16 at 14:51

0

Fixed it:

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

answered Feb 16 '16 at 14:51

Markus_DE_HH

1,061
3
13
29

You should use the solution that also removes the previous valdiation event handlers: `$("form").removeData("validator") .removeData("unobtrusiveValidation") .off("submit.validate click.validate focusin.validate focusout.validate keyup.validate invalid-form.validate"); $.validator.unobtrusive.parse("form");` – JotaBe Feb 16 '16 at 15:15

MVC Jquery Validation DataTable. New Row is not validating

1 Answers1