验证动态添加的字段

Posted 2023-05-08

【中文标题】验证动态添加的字段

【英文标题】：Validate dynamically added fields

【发布时间】：2014-12-19 23:20:04

【问题描述】：

我在单击按钮时使用 jQuery 添加表格行：

$("#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();

    );

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

但是在单击按钮提交时，我想验证这些字段是否已填充或未突出显示这些字段。

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

我的模型中的验证也失败了：

    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，但我需要它是动态的，以便我可以添加任意多的行。

谁能告诉我如何验证我的字段？

【问题讨论】：

如果您不知道 validate() 的工作原理，请阅读其文档。

【参考方案1】：

您需要在添加动态内容后再次解析form，以便验证该内容

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

【讨论】：

我对此进行了测试，现在它工作得很好。谢谢你:)。

太棒了。完美运行。和我想要的一样。

你们能详细说明一下吗？添加这段代码后是否需要调用 validate() 方法？

@HappyCoder。不，这是在您提交表单时自动完成的（或从先前已验证的表单控件中跳出选项卡）

@Rusty 看看 jQuery Validation 如何成为 jQuery 的插件 - 很可能不是。