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

Question

我有一个带有ASP MVC3的表单，input字段是用jQuery validation 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函数插入它，它就不能工作：

$(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 validation在验证中包含另一个字段：

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