Есть форма в модалке, на сайте Клик на "Оставить заявку"
Модалка реализована следующим образом.
//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 не выводит. Ничего не работает.
Проблема заключалась в модалке. При закрытии оно обрывало ф-ю.
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;
}
и все заработало)
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Подскажите пожалуйста, как реализовать подобное:
Я знаю, что в случае пре-инкремента значение сначала увеличивается, а потом используется в выражении, а в случае пост-инкремента - наоборотНо...
Нужно при нажатии на кнопку "Main button", менять Active у кнопки "Home button" (то есть, отображать и прятать её)"Home button" - не вложена в "Main button"