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

Question

我有一個表格，其中有一些字段，然后如果需要，用戶可以添加更多相同類型的字段。 我正在使用http://jqueryvalidation.org/ validate插件來驗證字段。

當我在某處閱讀jquery validate插件時，需要使用唯一的名稱來驗證字段。 所以我要對每個字段進行唯一命名。 首先，我希望如果我使用類添加規則，則validate插件將負責動態添加元素的驗證。 但事實並非如此。

因此，即使每個字段的名稱都是唯一的，validate插件也僅驗證最初呈現的第一個輸入。

我什至嘗試使用$ .clone（）希望它能處理所有事件綁定。 但這對我沒有用。 所以我移至下划線以重復標記，因為字段數量眾多，並且我不想用JS編寫模板並相應地命名。

我找不到解決方案，只能停留在這里。 在此問題解決之前無法繼續。

這是我寫的JS。

$("#work_form").validate();

$(".work_emp_name").rules("add", {
    required: true
});

_.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));
    counter += 1;
});

請在小提琴設置中找到標記。

示例和代碼在這里設置

Answer 1

使用此插件中的一種方法.rules()如.rules()並針對多個元素（如class .rules()定位時，還必須使用jQuery .each()方法。

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

而且，您不能在DOM中尚不存在的元素上使用.rules() 。 只需將.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
        });
    });
});

工作演示： http : //jsfiddle.net/Yy2gB/10/

---

但是，您可以通過僅定位一個新字段而不是使用work_emp_name class的所有字段來提高work_emp_name 。

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

工作演示： http ： //jsfiddle.net/Yy2gB/11/

---

我上面的兩個示例都是將規則添加到動態創建的字段中。 您仍然需要在dom准備就緒時為靜態字段聲明任何規則，如下所示...

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

Answer 2

返回第一個選定元素的驗證規則，或者添加指定的規則並返回第一個匹配元素的所有規則。 要求驗證父表單，即首先調用$（“ 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

Answer 3

這是因為jQuery Validation僅驗證當前第一次出現的數組。

您可以在插件上檢查我的提交 ，該提交在任何命名數組的情況下都可以正常工作。