Блог

Привет, я использую jQuery validator для одной формы. До сегодняшнего дня все работало нормально. Я добавил в форму новый код, который добавляет / удаляет дополнительные поля в форме (с присвоением классам значения «обязательно»)..

базовая форма — это что-то вроде >

     <form name="form" id="form">
    <input name="text1" class="required">
    <a id="addnew">Add new text</a>
<div id="newitems"></div>
    <submit>
    </form>
  

Код, который я использую, является

 <script type="text/javascript">
        $(document).ready(function({ $("#form").validate(); 
        $("#addnew").click(function({ 
        $("#newitems").append('<input class="required" name="newinput">'); 
}); });  
</script>
  

Идея заключается в том, что когда кто-то нажимает на Добавить новый текст, внутри формы добавляется новое поле. Моя проблема в том, что тогда валидатор не работает с новым полем, потому что оно уже загружено для формы.. Как я могу настроить javascript на проверку и новые поля?

Я не скопировал точный код своего сайта, потому что он очень длинный..

Это плагин проверки — это наиболее используемый валидатор в jquery

После создания вашего нового элемента формы вам необходимо сообщить плагину проверки, чтобы он проверил его, добавив правило. Добавление «требуемого» класса к элементу предупреждает плагин только в том случае, если элемент присутствует при загрузке документа. Попробуйте это:

    $(document).ready(function({ 
        $("#form").validate(); 
        $("#addnew").click(function({ 
            var input = $("<input />").attr("name", "newinput");
            $("#newitems").append(input);
            input.rules('add', {'required': true})
        }); 
    }); 
  

если вы добавляете динамический контент, любой из существующих не влияет на новые элементы управления. вы должны назначить событие снова после изменения dom. поэтому снова вызовите валидатор после модификации dom.

Вы должны снова привязать событие после загрузки динамического содержимого.

если вы добавляете динамический контент, любой из существующих не влияет на новые элементы управления. вы должны назначить событие снова после изменения dom. поэтому снова вызовите валидатор после модификации dom.

Если вы хотите выполнить повторную привязку, просто вызовите еще раз

  $("#addnew").click(function({ 
      $("#newitems").append('<input class="required" name="newinput">'); 
        }); 
  

Вы также можете поместить это в функцию

 function rebindit() {
 $("#addnew").click(function({ 
     $("#newitems").append('<input class="required" name="newinput">'); 
    }); 
}
  

и каждый раз, когда ваш контент изменяется, вызывайте rebindit();

В javascript есть событие onchange, которое запускается при изменении содержимого поля. Вы можете использовать его в новом поле, чтобы также выполнить проверку для этого поля.