Как проверить поля, которые были созданы при нажатии кнопки

ProgramBox

Как проверить поля, которые были созданы при нажатии кнопки

Post author:admin
Запись опубликована:7 апреля, 2023
Post category:Вопросы по программированию

#javascript #php #jquery #html #css

#javascript #php #jquery #HTML #css

Вопрос:

Моя концепция состоит в том, чтобы создать максимум 20 полей при нажатии кнопки » «, если вы нажмете на кнопку » «, тогда можно будет добавить новое поле, что было успешно сделано.. Но теперь моя проблема заключается в том, чтобы выполнить проверку полей, которые были созданы при нажатии кнопки » «.

У меня есть код для проверки, но он работает только для одного поля.. Может ли кто-нибудь, пожалуйста, помочь мне работать со всеми полями. Вот мой пример кода..

 <html>
<head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jQuery - v1.11.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#myform').validate({ 
    rules: {
        userid: {
            required: true,

        },
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

});
</script>
<script>
var field = 1;
function add_fields() 
{
field  ;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '  field  ':</div><input            type="text" name="userid " id="userid'   field  '" maxlength="50"    placeholder="User ID"  class="userid"/></div>';
objTo.appendChild(divtest)
}
</script>
</head>
<body>
<form id="myform">
<input type="button" id="more_fields" onclick="add_fields();" value=" " />
<div id="room_fileds">    
<div class="label">Field 1:</div>  
<input type="text" name="userid" id="userid" maxlength="50" placeholder="User ID"  class="userid"/><br>
</div>
<input type="submit" />
</form>
</body>
</html>

1. Для начала вам нужно переименовать входные данные в name="userid[]" , если вы хотите, чтобы несколько полей имели одинаковое имя. Это даст вам массив входных данных, в противном случае вы получите только один из них при публикации вашей формы.

Ответ №1:

Похоже, что проверка не применяется к динамически добавляемым входным данным.

Для этого вам необходимо добавить правила для вновь созданных входных данных с помощью

 $('input').rules('add', 'required')

1. @Nithya: Все ли в порядке? вы добились успеха?

2. @Nithya Вы поняли проблему? вам необходимо применить правила к вновь добавленным входным данным перед их проверкой..

3. @Nithya Без проблем, рад помочь.

Ответ №2:

В вашем методе добавления полей вам нужно будет повторно проверить форму и добавить новое правило.

 <script>
var field = 1;
function add_fields() 
{
    field  ;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Field '  field  ':</div>    <input type="text" name="userid " id="userid'   field  '" maxlength="50"    placeholder="User ID"  class="userid"/></div>';
    objTo.appendChild(divtest);
    $('#myform').validate();
    $("input#userid"   field).rules("add", "required");
}
</script>

Ознакомьтесь с документацией

1. Спасибо.. Но ваш код работает для первых 2 полей с моей стороны, не более 2 полей, которые..

2. Вы должны проверить, id совпадает ли одно из полей с "input#userid" field

3. Поскольку вы добавляете поля динамически и у вас есть id набор для каждого ввода, пожалуйста, убедитесь, что все идентификаторы уникальны, если это не так, это приведет к прерыванию работы jquery

4. отлично, рад, что помогли

Ответ №3:

Посчитайте, что вы добавили div при добавлении дополнительной кнопки :

 function add_fields()  {
  var apendedDivCount = 1;
  apendedDivCount = document.querySelectorAll('.userid').length; // Count of appended div with class "userid"
  if (apendedDivCount < 21) { // Condition to allow maximum 20 userid class div
    field  ;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Field '  field  ':</div>
    <input type="text" name="userid" id="userid'   field  '" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest);
  } else {
      alert ("You can't add more than 20");
 }
}