Плагин валидатора Jquery не проверяет новые входные данные

Question

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

basic форма выглядит как>

    <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>

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

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

Это плагин валидации - наиболее часто используемый валидатор в jquery

Answer 1

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

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

Answer 2

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

если вы добавляете динамический контент, какой-либо из существующих, не влияющий на новые элементы управления. Вы должны назначить событие снова после модификации 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 ();

Answer 3

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

Answer 4

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