javascript - Using MVC3 and JQuery to dynamically and mantain the DataAnnotations

Question

I have a problem similar to this: Using MVC and JQuery to dynamically & consistently add values to a table , but the difference is:

I have table and I'm cloning the last row (to keep the same format) with:

var $tableBody = $('#record').find("tbody");
$trLast = $tableBody.find("tr:last");
$trNew = $trLast.clone();
$trLast.after($trNew);

`

The rows are created succesfully, but the validations are binded to the first row (inputs, selects and textarea)

Inspecting the elment, are displayed:

<td>
// Code generated with the jquery .clone()
    <input data-val="true" data-val-required="Es necesario agregar una fecha." id="Salidas_0__Fecha" name="Salidas[1].Fecha" type="datetime" value="" autocomplete="off" class="hasDatepicker input-validation-error">
    <span class="field-validation-valid" data-valmsg-for="Salidas[1].Fecha" data-valmsg-replace="true"></span>
</td>

But the field-validation-valid is not binded to the input. Exist a way to do that?

Answer 1

First, when you play with dynamic content, you have to add JQuery Validation to the new content after cloning the row:

$.validator.unobtrusive.parse($("form"));

Second, the attribute "data-valmsg-for", on spans with "field-validation-valid" class, must be the same of attribute "name" of his corresponding input in each row of your table.

So, for example, a table with three rows has to look like this:

<td>
    <input data-val="true" data-val-required="Es necesario agregar una fecha." id="Salidas_0__Fecha" name="Salidas[0].Fecha" type="datetime" value="" autocomplete="off" class="hasDatepicker input-validation-error">
    <span class="field-validation-valid" data-valmsg-for="Salidas[0].Fecha" data-valmsg-replace="true"></span>
</td>
<td>
    <input data-val="true" data-val-required="Es necesario agregar una fecha." id="Salidas_1__Fecha" name="Salidas[1].Fecha" type="datetime" value="" autocomplete="off" class="hasDatepicker input-validation-error">
    <span class="field-validation-valid" data-valmsg-for="Salidas[1].Fecha" data-valmsg-replace="true"></span>
</td>
<td>
    <input data-val="true" data-val-required="Es necesario agregar una fecha." id="Salidas_2__Fecha" name="Salidas[2].Fecha" type="datetime" value="" autocomplete="off" class="hasDatepicker input-validation-error">
    <span class="field-validation-valid" data-valmsg-for="Salidas[2].Fecha" data-valmsg-replace="true"></span>
</td>

And the last is also needed for the correct Model Binding when posting the form.