发送表单 .validate () [重复]答案

【问题标题】：Sending the form .validate () [duplicate]发送表单 .validate () [重复]
【发布时间】：2018-05-09 07:01:44
【问题描述】：

有一个模态表单，点击“ОСТАВИТЬ ЗАЯВКУ”的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>

嗯，窗体本身就是窗口。

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

问题仍然是没有发送表单。通过单击发送表单，不会显示警报。没有任何效果。但同时验证也有效。

谢谢！

【问题讨论】：

标签： jquery jquery-validate

【解决方案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;
   }

一切顺利）

【讨论】：

【解决方案2】：

引用 OP：

“点击第一个输入后初始化。”

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

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

【讨论】：