Почему не работает скрипт в модальном окне?

Question

[Сергей Бурдужа]

У меня несколько форм, есть статичные и которые открываются в модальном окне.
Статичные работают.
Я использую для валидации jquery-validation и jquery-inputmask.
Вот я подключил скрипты, а потом модальные окна


Вот код формы из модального окна

<form class="form" id="js-modals_request">
				<div class="form-group">
					<label for="modals_request_user">Ваше имя</label>
					<input type="text" id="modals_request_user" placeholder="Имя">
				</div>

				<div class="form-group">
					<label for="modals_request_phone">Номер телефона</label>
					<input type="text" class="mask" id="modals_request_phone" placeholder="+7">
				</div>

				<div class="aggree">
					<label>
						<input class="checkbox" type="checkbox" name="checkbox-test" checked>
						<span class="checkbox-custom"></span>
						<span class="label">Я даю согласие на
						<a href="#">обработку персональных данных</a>
					</span>
					</label>
				</div>


				<input type="submit" class="btn" value="Отправить заявку">
			</form>
			<!--form-->

А вот код скрипта

$('#js-modals_request .mask').inputmask("[phone]", { "clearIncomplete": true });

    $('#js-modals_request').validate({
        rules: {
            modals_request_user: {
                required: true
            },
            modals_request_phone: {
                required: true
            }
        },
        messages: {
            modals_request_user: {
                required: 'Поле обязательно!'
            },
            modals_request_phone: {
                required: 'Поле обязательно!'
            }
        }
    });

В чем может быть проблема, как можно проверить?

Answer 1

[Владимир Проскурин]

В том, что в момент выполнения скрипта, скорее всего, элемента $('#js-modals_request .mask') не существует. Попробуйте этот скрипт закинуть в $(function() { }) или до него вставить alert($('#js-modals_request .mask').length) - этот код должен вывести кол-во найденных элементов, если там 0, то скрипт не видит элемент, если больше нуля, то проблема в другом. Также смотрите консоль. Попробуйте также свой скрипт вставить в консоль при открытой модалке, будет работать?

Comments

[Сергей Бурдужа]

Маска работает, alert выводиться.
Jquery.validation не работает.

[Сергей Бурдужа]

В консоли ошибок нет.

[Владимир Проскурин]

Сергей Бурдужа, ну можете также вывести
alert($('#js-modals_request').validate)
если выведет undefined, то скрипт валидатора не подключен.
Скиньте ссылку, посмотрю (если не хотите свесить, можете на почту, она в профиле).
Но я думаю, вот так должно работать

$(function() {
$('#js-modals_request .mask').inputmask("[phone]", { "clearIncomplete": true });

    $('#js-modals_request').validate({
        rules: {
            modals_request_user: {
                required: true
            },
            modals_request_phone: {
                required: true
            }
        },
        messages: {
            modals_request_user: {
                required: 'Поле обязательно!'
            },
            modals_request_phone: {
                required: 'Поле обязательно!'
            }
        }
    });
});

У вас же код формы находится в текущем html файле? Если он подгружается через ajax, то нужно вставлять ваш скрипт либо в код формы, либо отлавливать показ формы и вызывать его.

[Сергей Бурдужа]

Владимир Проскурин, Нашел первый косяк, забыл добавить атрибуты name для формы. Просто их у меня много, вот и не заметил.
У меня модалка реализована следующим образом.
После того как кликнул на input submit, эта модальное окно закрывается и открывается другая с благодарность.

//close request open thanks
    $('#js-modals_request').on('submit', function(e){
        $('.modal-request').fadeOut(200);
        $('.thanks-content').fadeIn(600);
    });

По идее, если форма не была отправлена, то оно не должно закрываться?
Или я что-то не то сделал?

[Сергей Бурдужа]

Вот ссылка на сайт portfolio.webforworld.info
Валидация уже работает, только с опозданием.
Если не правильно ввел, то окно закрывается.
Только если еще раз открываю, высвечиваются ошибки валидатора.
Такое ощущение, что submit все равно

[Сергей Бурдужа]

Кнопка в шапке справа, заказать размер

[Владимир Проскурин]

Сергей Бурдужа, ваш код сработает как только пользователь нажмет на отправить, независимо от того, прошла ли валидация, отправились данные. У validate есть свой хэндлер

$("#myform").validate({
  submitHandler: function(form) {
    // кажись этот, но я не знаю эту библиотеку
  }
 });

[Сергей Бурдужа]

Владимир Проскурин, Спасибо, уже дальше разберусь. Потом отпишусь.

[Сергей Бурдужа]

А вот не подскажите, почему теперь валидация проходит, все работает, только после отправки формы, новое окно не открывается?

Answer 2

[Сергей Бурдужа]

Решил проблему следующим образом

let modalsRequest = $('#js-modals_request');

 modalsRequest.on('submit', function(e){
        e.preventDefault();

        modalsRequest.validate({
            rules: {
                modals_request_user: {
                    required: true
                },
                modals_request_phone: {
                    required: true
                }
            },
            messages: {
                modals_request_user: {
                    required: 'Поле обязательно!'
                },
                modals_request_phone: {
                    required: 'Поле обязательно!'
                }
            },
            submitHandler: function(form) {
                $('.modal-request').fadeOut(200);
                $('.thanks-content').fadeIn(600);

                setTimeout(function(){
                    form.submit();
                }, 6000);
            }
        });
    });

Answer 3

[Никита]

Форма, вызывается как ? через аякс? Если да, то надо переинициализировать скрипты. Если нет, то посмотреть js,
мож документ рэди забыли

Comments

[Сергей Бурдужа]

Спасибо, что ответили. Решил проблему, можете посмотреть в ответах.