验证动态添加的字段 [英] Validate dynamically added fields

问题描述

我在单击按钮时使用 jQuery 添加一个表格行:

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 &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();

    });

我也使用此内容最初创建一行.

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.

我尝试使用 $("#form").validate(); 但我真的不知道如何使用它并且它没有用.

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; }
}

如果我使用 Razor 添加一行，它可以工作，但不能使用 jQuery，但我需要它动态，以便我可以添加任意数量的行.

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 ?

推荐答案

添加动态内容后需要再次解析form 才能验证该内容

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'));

这篇关于验证动态添加的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！