Почему не работает javascript после ajax?

Question

[Денис]

Сайт

На странице wordpress выводятся посты с помощью Ajax у каждого поста кнопка при клике модальное окно в нем форма, то есть у каждого поста форма одинаковая, пытаюсь ее провалидировать с помощью плагина Jquery.Validate, не работает, уже как не пробовал ((

<form action="#" method="post" id="ajax-form-services" class="ajax-form ajax-form_css">
    <fieldset>
        <legend class="sr-only form-legend">Subscribe form</legend>
        <div class="d-grid grid-gap-y-10 formbox-grid">
            <div class="a-group-form a-group-form--mb">
                <label for="user-name" class="sr-only">Введите имя</label>
                <input type="text" name="form_name" id="user-name" class="form-inp" placeholder="Иван Иванов" maxlength="30" autocomplete="given-name" aria-label="Введите имя">
            </div>
            <div class="a-group-form">
                <label for="user-phone" class="sr-only">Введите номер телефона</label>
                <input type="tel" name="form_phone" id="user-phone" class="form-inp" placeholder="Ваш номер телефона" maxlength="30" required="" autocomplete="tel" aria-label="Phone">
            </div>
            <div class="a-group-form">
                <label for="user-email" class="sr-only">E-mail</label>
                <input type="email" name="form_email" id="user-email" class="form-inp" placeholder="[e-mail]" maxlength="30" required="" autocomplete="email" aria-label="E-mail">
            </div>
            <div class="a-group-btn">
                <button type="submit" class="btn-clear but w-100 btn btn-lg bg-color-3 col-white btn-purple-hover">Оставить заявку</button>
            </div>
        </div>
    </fieldset>
</form>

jQuery(document).ready(function($) {
     $(document).on('submit', 'form[action="#"]', function(event) {
         event.preventDefault();
         console.log('SUBMIT BUTTON CLICKED');

         var $form = $(this);

         // Инициализация валидации для каждой формы отдельно
         $form.validate({
             rules: {
                 form_name: {
                     required: true,
                     minlength: 3,
                     maxlength: 30,
                 },
                 form_email: {
                     required: true,
                     email: true
                 },
             },
             messages: {
                 form_name: {
                     required: 'Имя обязательно должно быть заполнено',
                     minlength: 'Длина имени должна быть не менее 3-х символов',
                     maxlength: 'Длина имени должна быть не более 30-ти символов',
                 },
                 form_email: {
                     required: 'Поле email обязательно для заполнения',
                     email: 'Введите корректный email',
                 },
             },
             submitHandler: function(form) {
                 $.ajax({
                     url: 'your-server-endpoint-url',
                     type: 'POST',
                     data: $(form).serialize(),
                     success: function(response) {
                         alert('Форма успешно отправлена!');
                         $("form").trigger("reset");
                     },
                     error: function(response) {
                         alert('Произошла ошибка при отправке формы.');
                         $("form").trigger("reset");
                     }
                 });
             }
         });
     });
 });

Comments

[Денис]

Вот так срабатывает в консоли

jQuery(document).ready(function($) {
     $(document).on('click', 'form[action="#"] button[type="submit"]', function(event) {
         event.preventDefault();
         console.log('SUBMIT BUTTON CLICKED');
     });
 });

[ksnk]

Вообще-то ...validate сам устанавливает обработчик отправки формы. Так что вручную его устанавливать не надо. Тем более бессмысленно его устанавливать, когда кнопка уже нажата.
Просто оставить вызов $('form[action="#"]').validate(...) с прежними параметрами
https://jqueryvalidation.org/validate/