jquery - 验证使用 after 或 append 插入的字段

Question

我有一个带有 ASP MVC3 的表单，并且input使用 jQuery validate plugin v1.8 验证了这些字段（使用 MVC3 的默认 jQuery 验证）。这工作得很好，但问题是当我插入一个新字段以使用afterorappend函数进行验证时。

如果我有这个 HTML：

<label for="name">Name: </label>
<input class="text-files" data-val="true" data-val-required="Name missing" id="name" name="name" type="text" value="">
<span class="field-validation-error" data-valmsg-for="name" data-valmsg-replace="true"></span>

它工作正常，但如果我用afterorinsert函数插入它，它就不起作用：

$(window).load(function () {
    $('#addName').click(function (event) {
        event.preventDefault();
        var $newdiv = $('<label for="name">Name: </label><input class="text-files" data-val="true" data-val-required="Name missing" id="name" name="name" type="text" value=""><span class="field-validation-error" data-valmsg-for="name" data-valmsg-replace="true"></span>');

        $('.names').append($newdiv);
    });
});

Answer 1

验证规则建立在 DOM 加载时可用的元素之上。因此，您需要使用以下代码告诉 jQuery validate 在验证中包含另一个字段：

$('#addName').click(function (event) {
    event.preventDefault();
    var $newdiv = $('<label for="name">Name: </label><input class="text-files" data-val="true" data-val-required="Name missing" id="name" name="name" type="text" value=""><span class="field-validation-error" data-valmsg-for="name" data-valmsg-replace="true"></span>');
    $("#name").rules("add", "required"); // let validate know about the new field.

    $('.names').append($newdiv);
});