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函数插入它，它就不起作用：

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

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

1 个答案: