Question

在点击“ОСТАВИТЬЗАЯВКУ”的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-ти символов в поле"
                    }
                }
            });
        }
    })
});

问题仍然是表单未发送。通过单击发送表单，不会显示警报。什么都行不通。但同时验证工作。

谢谢！

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：

＆＃34;点击第一个输入后初始化。＆＃34;

您刚刚解释了问题的根本原因。您不正确地使用ngOnInit() { this.filteredPatients = this.myControl.valueChanges.pipe( startWith<string | Patient>(''), map(patient => typeof patient === 'string' ? patient : patient.name), map(name => name ? this.filterPatient(name) : this.listPatients.slice()) ); } displayFnPat(patient: Patient): string | undefined { return patient ? patient.name : undefined; } filterPatient(name: string) { return this.listPatients.filter(patient => patient.name.toLowerCase().includes(name.toLowerCase())); }处理程序来初始化Validate插件，而不是立即在页面加载时使用。

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

发送表单.validate（）

2 个答案: