Sending the form .validate ()

Question

There is a form in modal, on the site of the Click on "ОСТАВИТЬ ЗАЯВКУ"

The modal is implemented as follows.

    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>

Well, the window itself with the form.

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

Connected library jquery.validate

Here initialization. Crutch. For otherwise does not work in this modal. Initializes after a click on the first input.

$.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-ти символов в поле"
                    }
                }
            });
        }
    })
});

The problem remains that the form is not sent. By clicking on the send form, the alert does not display. Nothing works. But at the same time validation works.

Thank you!

score 0 · Accepted Answer · answered May 09 '18 at 08:52

The problem was modal. When closed, it breaks the function

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

Removed else

 else {
      return false;
   }

and it all worked)

Sparky · Answer 2 · 2018-05-09T14:27:27.023

Quote OP:

"Initializes after a click on the first input."

You've just explained the root cause of the problem. You're improperly using a click handler to initialize the Validate plugin, instead of immediately on page load.

You're initializing .validate() on the modal within a click handler of the modal's form. Instead, you should be initialing .validate() on the modal's form when this form is created or shown. It appears that your form exists when the page is loaded, so that is when you should be calling .validate() on this form.

Sending the form .validate ()

2 Answers2