0

Есть форма в модалке, на сайте Клик на "Оставить заявку"

Модалка реализована следующим образом.

//modal

    var modal = {
        self: $(".modal"),

        showModal: function(content) {
            this.self.find("#innerModal").html(content);
            this.self.fadeIn(500);
        },
        hideModal: function() {
            this.self.fadeOut(200);
            this.self.find("#innerModal").html("");
        }
    };

    //show modal
    $(".js_popUp").on("click", function(e) {
        e.preventDefault();
        var _popUp = $(this).data("popup");
        var content = $('.js-popUp' + _popUp).html();
        modal.showModal(content);
    });

    //hide modal
    modal.self.on("click", function(e) {
        if (
            $(e.target).attr("id") === "modal" ||
            $(e.target).hasClass("js-closePopup")
        ) {
            e.preventDefault();
            modal.hideModal();
        } else {
            return false;
        }
    });

<div id="modal" class="modal">
    <div class="modal__wrap">
        <div id="innerModal"></div>
    </div>
</div>

Ну и само окно с формой.

<div class="header__application">
    <h3>Оставить заявку</h3>
    <a href="#" class="header__application-close js-closePopup"></a>
    <form class="header__application-form js-applicationForm js-form" action="">
        <div>
            <span class="field-wrap">
                <p>Ваше имя</p>
                <input class="js-validate" type="text" placeholder="Ваше имя" name="name">
            </span>
            <span class="field-wrap">
                <p>Телефон</p>
                <input class="" type="tel" placeholder="+7 ____ ____ __ __" name="tel">
            </span>
        </div>
        <div>
            <span class="field-wrap">
                <p>Комментарий</p>
                <textarea class="" rows="5" placeholder="Пожалуйста, опишите подробнее о своём празднике." name="text"></textarea>
            </span>
        </div>
        <div>
            <span class="field-wrap">
                <p>Почта</p>
                <input class="" type="email" placeholder="@inbox.ru" name="email">
            </span>
        </div>
        <div>
            <button class="Btn_black">Отправить</button>
            <a class="js-clearApplication" href="#">Стереть</a>
        </div>
    </form>
</div>

Подключена библиотека jquery.validate

Тут инициализация. Костыль. Ибо по другому не работает в этой модалке. Инициализирует после клика по первому инпуту.

$.validator.addMethod('fnType', function(value, element) {
    return value.match(/^\+(?:[0-9] ?){6,14}[0-9]$/);
},'Введите корректный номер');


document.documentElement.addEventListener('click', function (ev) {
    var modal =  document.querySelector('#modal');
    modal.addEventListener('click', function (ev) {
        var target = ev.target;

        if (target.classList.contains('js-validate')){
            $('#innerModal .header__application-form.js-applicationForm.js-form').validate({
                submitHandler: function (){
                    alert('OK!');
                    console.log('sdfgsd');
                },
                rules: {
                    name: {
                        required: true,
                        minlength: 2
                    },
                    text: {
                        required: true,
                        minlength: 20
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    tel: {
                        required: true,
                        minlength: 12,
                        fnType: true
                    }
                },
                messages: {
                    name: {
                        required: "Поле обязательно к заполнению",
                        minlength: "Введите не менее 2-х символов в поле"
                    },
                    text: {
                        required: "Поле обязательно к заполнению",
                        minlength: "Введите не менее 20-ти символов в поле"
                    },
                    email: {
                        required: "Поле обязательно к заполнению",
                        email: "Введите корректный email"
                    },
                    tel: {
                        required: "Поле обязательно к заполнению",
                        minlength: "Введите не менее 12-ти символов в поле"
                    }
                }
            });
        }
    })
});

Осталась проблема в том, что форма не отправляется. По клику на отправку формы alert не выводит. Ничего не работает.

4
  • 1. Попробуйте добавить кнопку type="submit". Так же ваш "костыль" не делает ничего хорошего. Лучше просто явно вызовите инициализацию скрипта валидации, в методе showModal (после вставки html) 8 мая 2018 в 7:23
  • @PavelGorobtsov Пробовал, не помогло. На странице еще 3 формы. Там все работает. 8 мая 2018 в 7:24
  • @PavelGorobtsov ок. попробую. 8 мая 2018 в 7:50
  • @PavelGorobtsov не помогло. Я уже переписал модалку. Валидатор инициализируется без каких либо костылей. Но отправка не идет( 9 мая 2018 в 8:09

1 ответ 1

0

Проблема заключалась в модалке. При закрытии оно обрывало ф-ю.

 modal.self.on("click", function(e) {
        if (
            $(e.target).attr("id") === "modal" ||
            $(e.target).hasClass("js-closePopup")
        ) {
            e.preventDefault();
            modal.hideModal();
        } else {
            return false;
        }
    });

Убрал

 else {
   return false;
}

и все заработало)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.