Проверка jQuery с добавленным элементом формы

Question

Я прочитал четыре связанных ответа на SO, и они составляют основную часть динамической проверки, которую я пытаюсь здесь.

У меня есть форма с некоторыми динамическими действиями, такими как добавление и удаление блока (div), который содержит пользовательские исследования или опыт. Каждый блок содержит несколько элементов, которые мне нужно проверить.

Проверка добавленного элемента работает только в том случае, если вы сфокусировались, а затем отправили форму, до этого, если вы не сосредоточитесь на элементе для примера «study_5» и отправите форму, она будет отправлена ​​без проблем (даже если он имеет обязательный тег)

Вот мой JS:

var multiple_formation_max_fields = 10;
            var multiple_formation_wrapper = $(".multiple-formation");
            var multiple_formation_add_button = $(".add_formation");

            var x = {{ Auth::user()->candidate and Auth::user()->candidate->certifications->count() > 0 ? Auth::user()->candidate->certifications->count() + 1 : 1}};
            $(multiple_formation_add_button).click(function (e) {
                e.preventDefault();
                if (x < multiple_formation_max_fields) {
                    x++;
                    $(multiple_formation_wrapper).append(
                        '<div class="sub-form">' +
                                                    // deleted unusfull code
                        '<div class="col-lg-6">' +
                        '<span class="pf-title">Établissement</span>' +
                        '<div class="pf-field">' +
                        '<input type="text" class="form-control" required id="formation_establishment_'+x+'" placeholder="ISET, Esprit, .. " name="formation_establishment[]">' +
                        // deleted unusfull code
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
                }
                $('.date').dateDropper();
                $(".chosen").chosen();
                $('#formation_establishment_'+x).rules('add', {
                    'required': true
                });
                $('#form').validate();

            });

и результат, как будто я нажимаю на кнопку отправки, не обращая внимания на второй элемент, добавляемый в форму:

Первый проверенный элемент работает, потому что он находится в основном на странице. Второй нет. Третий работает, потому что я нажал «Отправить», сосредоточившись там.

Answer 1

Нормальная работа плагина jQuery Validate:

1. Инициализировать плагин в вашей форме при загрузке страницы с помощью метода .validate(). не инициализируйте форму (не вызывайте метод .validate()) в обработчике click.

2. Добавление правил в динамически добавляемые поля формы с помощью метода .rules().

Вы не можете выполнить шаг 2 до шага 1.

---

Вы звоните .validate() после .rules(), и он находится внутри обработчика click. Метод .validate() - это инициализация плагина в вашей форме, и его следует вызывать только один раз и при загрузке страницы.

Никогда нельзя вызывать метод .rules() до инициализации формы с помощью .validate().

Поэтому полностью извлеките .validate() из обработчика click и вызовите его только один раз в обработчике готовности документа.