jquery - español - Validar campos agregados dinámicamente

jquery validate rules

Question

Estoy agregando una fila de la tabla con jQuery al hacer clic en el botón:

$("#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 &quot;Anzahl&quot; muss eine Zahl sein." data-val-required="Das Feld &quot;Anzahl&quot; 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 &quot;Einzelpreis&quot; muss eine Zahl sein." data-val-required="Das Feld &quot;Einzelpreis&quot; 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 &quot;Gesamtpreis&quot; muss eine Zahl sein." data-val-required="Das Feld &quot;Gesamtpreis&quot; 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 &quot;Anzahl Pakete&quot; muss eine Zahl sein." data-val-required="Das Feld &quot;Anzahl Pakete&quot; 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 &quot;Fertig verpackt?&quot; 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();

    });

También uso este contenido para crear inicialmente una fila.

Pero al hacer clic en el botón enviar, quiero validar estos campos si están llenos o no resaltar esos campos.

Intenté usar $("#form").validate(); pero realmente no sé cómo usarlo y no funcionó.

También la validación en mi modelo falló:

    public class InhaltModel
{
    //Inhalt
    [Required]
    [Display(Name = "Artikelnummer")]
    public string ccArtikelNr { get; set; }
    [Required]
    [Display(Name = "Warentarif-Nr")]
    public string ccWarentarifNr { get; set; }
}

Si uso Razor para agregar una fila, funciona, pero no con jQuery, pero lo necesito de forma dinámica para poder agregar tantas filas como desee.

¿Alguien puede decirme cómo validar mis campos?

Answer 1

Debe volver a analizar el form después de agregar contenido dinámico para que ese contenido se valide

$(''form'').data(''validator'', null);
$.validator.unobtrusive.parse($(''form''));