I'm using expressive annotation on a form that contains list object. First load, everything works fine.
There is a button, that allow to add object on this list. To add this object, I replace a part of the form with a partial view that was rendered from server side.
The view is OK, and the previous object validation work fine. But the added one doesn't work.
Here is my javascript code that is load in my partial view
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
var validator = $('#controlReportForm').data('validator');
//Settings to validate hiddend fileds (Required for know how validation)
validator.settings.ignore = "";
validator.settings.onkeyup = function (element) { // execute validation of current field on keyup event
$(element).valid();
};
});
Here is the html produced on first load
<div class="row action">
<input id="ListActionsCo_0__Type" name="ListActionsCo[0].Type" type="hidden" value="CO" class="ea-triggers-bound">
<input data-val="true" data-val-number="The field Order must be a number." data-val-required="The Order field is required." id="ListActionsCo_0__Order" name="ListActionsCo[0].Order" type="hidden" value="0" class="ea-triggers-bound">
<div class="col-md-8">
<textarea class="form-control ea-triggers-bound valid" cols="20" data-val="true" data-val-requiredif="- Le champ \"Identification de la non conformité\" est obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression=""Type == 'DP'"" data-val-requiredif-fieldsmap="{"Type":"string"}" id="ListActionsCo_0__Texte" name="ListActionsCo[0].Texte" rows="2" aria-describedby="ListActionsCo_0__Texte-error" aria-invalid="false">co co co</textarea>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
Responsable
</div>
<div class="col-md-6">
<input class="form-control ea-triggers-bound" data-val="true" data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression=""Texte != null && (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')"" data-val-requiredif-fieldsmap="{"Texte":"string","Type":"string"}" id="ListActionsCo_0__Responsable" name="ListActionsCo[0].Responsable" type="text" value="respco">
<span class="field-validation-valid" data-valmsg-for="ListActionsCo[0].Responsable" data-valmsg-replace="true"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
Date de réalisation
</div>
<div class="col-md-6">
<div class="input-group date">
<input class="form-control ea-triggers-bound" data-val="true" data-val-date="The field DtVal must be a date." data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression=""Texte != null && (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')"" data-val-requiredif-fieldsmap="{"Texte":"string","Type":"string"}" id="ListActionsCo_0__DtVal" name="ListActionsCo[0].DtVal" type="text" value="13/06/2017">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
<span class="field-validation-valid" data-valmsg-for="ListActionsCo[0].DtVal" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
And here is the html produced when object added
<div class="row action">
<input id="ListActionsCo_1__Type" name="ListActionsCo[1].Type" type="hidden" value="CO" class="ea-triggers-bound">
<input data-val="true" data-val-number="The field Order must be a number." data-val-required="The Order field is required." id="ListActionsCo_1__Order" name="ListActionsCo[1].Order" type="hidden" value="0" class="ea-triggers-bound">
<div class="col-md-8">
<textarea class="form-control ea-triggers-bound" cols="20" data-val="true" data-val-requiredif="- Le champ \"Identification de la non conformité\" est obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression=""Type == 'DP'"" data-val-requiredif-fieldsmap="{"Type":"string"}" id="ListActionsCo_1__Texte" name="ListActionsCo[1].Texte" rows="2"></textarea>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
Responsable
</div>
<div class="col-md-6">
<input class="form-control ea-triggers-bound" data-val="true" data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression=""Texte != null && (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')"" data-val-requiredif-fieldsmap="{"Texte":"string","Type":"string"}" id="ListActionsCo_1__Responsable" name="ListActionsCo[1].Responsable" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="ListActionsCo[1].Responsable" data-valmsg-replace="true"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
Date de réalisation
</div>
<div class="col-md-6">
<div class="input-group date">
<input class="form-control ea-triggers-bound" data-val="true" data-val-date="The field DtVal must be a date." data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression=""Texte != null && (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')"" data-val-requiredif-fieldsmap="{"Texte":"string","Type":"string"}" id="ListActionsCo_1__DtVal" name="ListActionsCo[1].DtVal" type="text" value="">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span class="field-validation-valid" data-valmsg-for="ListActionsCo[1].DtVal" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
I don't see any difference. But I think I'va to rebind this new part of the dom to be loaded for validation.
I've tried
$.validator.unobtrusive.parse($('#controlReportForm'));
But nothing to do.
Any help, remarks will be helpful. Thanks
Ok thanks to @Elmer Dantas,
the solutions is to add this javascript code after retriving the dom
var $form = $("form");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);