Cloning Login and Validation in MVC 3 with jQuery

Question

I am using the validation and non-intrusiveness of the MVC3 model to validate the show and try to find a way to clone the item and validate.

This is the code of my kind:

<div id="d1" class="Addable"> @Html.EditorFor(model => model.CellPhone) @Html.ValidationMessageFor(model => model.CellPhone) </div> <input type"button" class="AddE" /> 

And HTML Dom:

 <div class="Addable" id="d1"> <input type="text" value="" name="CellPhone" id="CellPhone" data-val-required="Req." data-val-regex-pattern="^04[1234][0-9]{6}$" data-val-regex="notValid" data-val="true" class="text-box single-line valid"> <span data-valmsg-replace="true" data-valmsg-for="CellPhone" class="invalid-side-note field-validation-valid"></span> </div> 

Therefore, I use the following script to clone a new one with name names, such as array names:

 //Add new Addable div $('.AddNewE').click(function () { var Target = $('.Addable:first'); var TargetId = $(Target).attr('id'); var Count = $('.Addable#' + TargetId).size(); var CloneTarget = $(Target).clone(); CloneTarget.find('input').val(''); CloneTarget.insertAfter('.Addable:last'); var TargetName = $(Target).find('input').attr('name'); if (Count == 1) { var CloneName = TargetName + '[1]'; TargetName = TargetName + '[0]'; $(Target).find('input').attr('name', TargetName); $(Target).find('span[class|="field-validation"]').attr('data-valmsg-for', TargetName); $(CloneTarget).find('input').attr('name', CloneName); $(CloneTarget).find('span[class|="field-validation"]').attr('data-valmsg-for', CloneName); } else { var indx = TargetName.length - 3; var CloneTargetName = TargetName.substring(0, indx); CloneTargetName = CloneTargetName + '[' + Count + ']'; $(CloneTarget).find('input').attr('name', CloneTargetName); $(CloneTarget).find('span[class|="field-validation"]').attr('data-valmsg-for', CloneTargetName); } }); 

After the first clone of Dom:

 <div class="Addable" id="d1"> <input type="text" value="" name="CellPhone[0]" id="CellPhone" data-val-required="Req." data-val-regex-pattern="^04[1234][0-9]{6}$" data-val-regex="notValid" data-val="true" class="text-box single-line valid"> <span data-valmsg-replace="true" data-valmsg-for="CellPhone[0]" class="invalid-side-note field-validation-valid"></span> </div> <div class="Addable" id="d1"> <input type="text" value="" name="CellPhone[1]" id="CellPhone" data-val-required="Req." data-val-regex-pattern="^04[1234][0-9]{6}$" data-val-regex="notValid" data-val="true" class="text-box single-line valid"> <span data-valmsg-replace="true" data-valmsg-for="CellPhone[1]" class="invalid-side-note field-validation-valid"></span> </div> 

I change both the validation range and the input, since each input will have its own validation. but after cloning, validation didn't work at all. what is the problem? What is your suggestion?

Answer 1

These lines help me:

  $('form').removeData('validator'); $('form').removeData('unobtrusiveValidation'); $.validator.unobtrusive.parse('form');