Проверка динамических полей ввода с помощью jquery

Question

Проверка динамических полей ввода с помощью jquery

Эй, ребята, я пытаюсь проверить поля ввода, которые будут динамически генерироваться пользователем с помощью кнопки ссылки, чтобы заставить пользователя добавлять больше полей ввода, но проблема у меня заключается в том, что это только первое поле, которое проверено, но сгенерированные поля ввода динамически не проверяется.
Вот HTML-коды:

<form id="testform" method="post">
<div style="margin-top: 10px;" id="within_nigeria1">
<div id="divint1">Address(s) within Nigeria: <a href="" id="add_field_button">Add more field</a>

<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]" />
<div class="wn"></div>
</div>
</div>
<input type="submit" value="submit" />
</form>

Вот коды JQuery:

$('#testform').validate({
rules: {
"address_text[]": {
required: true
}
}
});

var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#within_nigeria1"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var wrapper1 = $(".wn");var x = 1; //initlal text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();

if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]"/><a href="" class="remove_field">Remove</a>');
}
});

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;});

0

javascript jquery jquery-validate php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

name="address_text[]"

вам нужно поставить явные счетчики в скобках. Исходный HTML должен использовать name=address_text[0]и Javascript, который добавляет строки, может увеличивать его.

var counter = 0;

$(add_button).click(function (e) { //on add input button click
e.preventDefault();

if (x < max_fields) { //max input box allowed
x++; //text box increment
counter++;
$(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text['+counter+']"/><a href="" class="remove_field">Remove</a>');
}
});

1