javascript:jQuery驗證動態表單輸入上的插件不起作用

使用此插件中的一種方法時，例如 .rules() ，並且定位多个元素（例如 class） ，還必须使用jQuery .each() 方法。

$('.work_emp_name').each(function () {
    $(this).rules("add", {
        required: true
    });
});

您不能使用 .rules() 在DOM中尚不存在的元素上.只需移動 .rules() 建立新輸入的函式內部的方法。

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
    $('.work_emp_name').each(function () { 
        $(this).rules("add", {
            required: true
        });
    });
});

Working DEMO: http://jsfiddle.net/Yy2gB/10/

---

However, you can make it more efficient by only targeting the one new field ，而不是 work_emp_name的所有欄位 class

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));   // <- add new field
    $('input[name="work_emp_name['+counter+']"]').rules("add", {  // <- apply rule to new field
        required: true
    });
    counter += 1;
});

Working DEMO: http://jsfiddle.net/Yy2gB/11/

---

我上面的两个示例都是將規則添加到動態建立的欄位中.仍然需要在dom準備就绪時為靜態欄位宣告任何規則，如下所示...

$("#work_form").validate({
    rules: {
        "work_emp_name[0]": {
            required: true
        }
    }
});

返迴第一个選定元素的驗證規則，或者 添加指定的規則並返迴第一个匹配元素的所有規則.需要驗證父表單，即首先呼叫$（" form"）.validate（）或

删除指定的規則並返迴第一个匹配元素的所有規則。 更多資訊

function addRule(id){
    $("[name='work_emp_name["+id+"]']").rules("add", {
        required: true
    });
}
$("#work_form").validate();
addRule(0);
_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());
var counter = 1;
$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    addRule(counter);
    counter += 1;
}); here

這是因為jQuery Validation仅驗證当前第一次出現的陣列.

您可以檢查我在插件上的提交，该提交在任何出現的命名陣列上都可以正常工作。