发送表单.validate()

Question

在site的site点击“ОСТАВИТЬЗАЯВКУ”

模态实现如下

    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>

好吧，window本身就跟表格一样。

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

问题依旧，表格没有发送。通过单击发送表单，不会显示警报。什么都不管用。但同时验证有效。

谢谢！

Answer 1

问题是模态的。关闭时，它会破坏功能

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

一切正常）

Answer 2

引用OP：

"Initializes after a click on the first input."

您刚刚解释了问题的根本原因。您未正确使用 click 处理程序来初始化验证插件，而不是在页面加载时立即初始化。

您正在模态表单的 click 处理程序中初始化模态 .validate()。相反，当创建或显示此表单时，您应该在模式的表单上签名 .validate() 。加载页面时您的表单似乎存在，因此当您应该在此表单上调用 .validate() 时。

发送表单.validate()

Sending the form .validate ()

jquery

jquery-validate