Validate dynamically added fields
asp.net-mvc, jquery, validation
Solution
You need to parse the `form` again after adding dynamic content in order for that content to be validated
$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));
Problem
I'm adding a table row with jQuery on button click: ``` $("#add_row").click(function () { zeile++; $("#ArtikelTabelle > tbody").append('<tr id="reihe' + zeile + '">' + '<td rowspan="2"><b>' + (zeile + 1) + '</b></td>' + '<td><input class="form-control" id="ccTabelle_' + zeile + '__ccArtikelNr" name="ccTabelle[' + zeile + '].ccArtikelNr" type="text" /></td>' + '<td><input class="form-control" id="ccTabelle_' + zeile + '__ccWarentarifNr" name="ccTabelle[' + zeile + '].ccWarentarifNr" type="text" /></td>' + '<td><input class="form-control" data-val="true" data-val-number="Das Feld "Anzahl" muss eine Zahl sein." data-val-required="Das Feld "Anzahl" ist erforderlich." id="ccTabelle_' + zeile + '__ccAnzahl" name="ccTabelle[' + zeile + '].ccAnzahl" type="text" /></td>' + '<td><input class="form-control" data-val="true" data-val-number="Das Feld "Einzelpreis" muss eine Zahl sein." data-val-required="Das Feld "Einzelpreis" ist erforderlich." id="ccTabelle_' + zeile + '__ccEinzelpreis" name="ccTabelle[' + zeile + '].ccEinzelpreis" type="text" /></td>' + '<td><input class="form-control" data-val="true" data-val-number="Das Feld "Gesamtpreis" muss eine Zahl sein." data-val-required="Das Feld "Gesamtpreis" ist erforderlich." id="ccTabelle_' + zeile + '__ccGesamtpreis" name="ccTabelle[' + zeile + '].ccGesamtpreis" type="text" /></td>' + '<td><input class="form-control" data-val="true" data-val-number="Das Feld "Anzahl Pakete" muss eine Zahl sein." data-val-required="Das Feld "Anzahl Pakete" ist erforderlich." id="ccTabelle_' + zeile + '__ccAnzahlPakete" name="ccTabelle[' + zeile + '].ccAnzahlPakete" type="text" /></td>' + '<td><input class="checkbox-inline" data-val="true" data-val-required="Das Feld "Fertig verpackt?" ist erforderlich." id="ccTabelle_' + zeile + '__ccFertigVerpackt" name="ccTabelle[' + zeile + '].ccFertigVerpackt" type="checkbox" /><input name="ccTabelle[' + zeile + '].ccFertigVerpackt" type="hidden" /></td>' + '<td rowspan="2"><a class="btn btn-default delete_row" data-rowid="' + zeile + '">Artikel löschen</a></td>' + '</tr>' + '<tr id="text' + zeile + '">' + '<td colspan="3"> <textarea class="form-control input-md" id="ccTabelle_' + zeile + '__ccInhaltsbeschreibung" name="ccTabelle[' + zeile + '].ccInhaltsbeschreibung" placeholder="Inhaltsbeschreibung"></textarea> </td>' + '<td colspan="4"> <textarea class="form-control input-md" id="ccTabelle_' + zeile + '__ccBemerkungInhalt" name="ccTabelle[' + zeile + '].ccBemerkungInhalt" placeholder="Bemerkungen"></textarea> </td>' + '</tr>'); aktualisiereZeilennummer(); }); ``` I also use this content to initially create a row. But on clicking button submit I want to validate these fields if they are filled or not an highlight those fields. I tried using `$("#form").validate();` but I don't really know how to use it and it didn't work. Also the validation in my model failed: ``` public class InhaltModel { //Inhalt [Required] [Display(Name = "Artikelnummer")] public string ccArtikelNr { get; set; } [Required] [Display(Name = "Warentarif-Nr")] public string ccWarentarifNr { get; set; } } ``` If I use Razor to add a row it works but not with jQuery, but i need it dynamic so that I can add as many rows as I want to. Can anyone tell me how to validate my fields ?