验证在after或append之后插入的字段

Question

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

如果我有这个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>

它可以正常工作，但是如果我使用after或insert函数将其insert ，则无法使用：

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