首頁>Program>source

我有一个表單,其中有一些欄位,然後如果需要,使用者可以添加更多相同型別的欄位.我使用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;
});

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

example and code set up here

最新回復
  • 5月前
    1 #

    使用此插件中的一種方法時,例如 .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
            }
        }
    });
    

  • 5月前
    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
    

  • 5月前
    3 #

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

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

  • javascript:从另一个頁面获取Bootstrap的模式內容
  • 通過从Javascript中的特定日期减去X天數来查詢日期