Плагин jquery validate для динамических входных форм не работает

У меня есть форма, где у меня есть несколько полей, а затем при необходимости пользователь может добавить больше полей одного типа. Я использую http://jqueryvalidation.org/ проверить плагин для проверки полей.

Как я читал где-то jquery validate плагин требует уникальных имен для полей для их проверки. Поэтому я называю каждое поле уникальным. Сначала я надеялся, что validate plugin позаботится о динамически добавленной проверке элемента, если я добавлю правила, используя классы. Но, оказывается, это не так.

Таким образом, даже если имя каждого поля уникально, validate plugin проверяет только первый вход, который был отображен изначально.

Я даже попытался использовать $. 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;
});

Найдите разметку в настройке скрипта.

пример и код, созданный здесь

Ответ 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
        });
    });
});

Рабочий DEMO: http://jsfiddle.net/Yy2gB/10/

Однако вы можете сделать его более эффективным, только нацеливаясь на одно новое поле, вместо всех полей с 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;
});

Рабочий DEMO: http://jsfiddle.net/Yy2gB/11/

Оба моих примера выше для добавления правил в динамически создаваемые поля. Вам все равно нужно объявить какие-либо правила для ваших статических полей на dom, как показано ниже:

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

Ответ 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

Ответ 3

Это потому, что jQuery Validation проверяет только первое вхождение массива в настоящее время.

Вы можете проверить мой commit в плагине, который будет нормально работать в любом случае именованного массива.