Помогите, пожалуйста!
Учусь по видеокурсу. Суть вопроса такая. На сайте есть формы обратной связи. Дело в том, что формы отправляются даже если поля не заполнены. Как сделать так, чтобы формы не отправлялись, если поля не заполнены? Я так понимаю, что надо в JS где-то и как-то правильно прописать, что если форма не прошла валидацию, то она не будет отправлена. Но до изучения JS мне ещё далековато, а разобраться с проблемой хочется сейчас. Отправка почты реализована через PHPMailer. Вот ссылка на сайт
https://pulse.neverov.site/
Вот html код форм (модальные окна)
<div class="overlay">
<div class="modal" id="consultation">
<div class="modal__close">×</div>
<div class="modal__subtitle">Просто заполните форму заявки</div>
<div class="modal__descr">и мы перезвоним вам в течении 10 минут</div>
<form class="feed-form feed-form_mt25" action="#">
<input name="name" placeholder="Ваше имя" type="text">
<input name="phone" placeholder="Ваш телефон">
<input name="email" placeholder="Ваше E-mail" type="email">
<button class="button button_submit">заказать консультацию</button>
</form>
</div>
<div class="modal" id="order">
<div class="modal__close">×</div>
<div class="modal__subtitle">Ваш заказ:</div>
<div class="modal__descr">Пульсометр Polar FT1</div>
<form class="feed-form feed-form_mt25" action="#">
<input name="name" required placeholder="Ваше имя" type="text">
<input name="phone" required placeholder="Ваш телефон">
<input name="email" required placeholder="Ваше E-mail" type="email">
<button class="button button_submit">купить</button>
</form>
</div>
<div class="modal modal_mini" id="thanks">
<div class="modal__close">×</div>
<div class="modal__subtitle">Спасибо за вашу заявку!</div>
<div class="modal__descr">Наш менеджер свяжется с вами в ближайшее время!</div>
</div>
Вот скрипт JS модальных окон
$('[data-modal=consultation]').on('click', function () {
$('.overlay, #consultation').fadeIn('slow');
});
$('.modal__close').on('click', function() {
$('.overlay, #consultation, #thanks, #order').fadeOut('slow');
});
$('.button_mini').each(function(i) {
$(this).on('click', function() {
$('#order .modal__descr').text($('.catalog-item__subtitle').eq(i).text());
$('.overlay, #order').fadeIn('slow');
})
});
function valideForms(form){
$(form).validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: "required",
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Пожалуйста, введите своё имя",
minlength: jQuery.validator.format("Введите не менее {0} символов!")
},
phone: "Пожалуйста, введите свой номер телефона",
email: {
required: "Пожалуйста, введите свою почту",
email: "Неправильно введён адрес почты"
}
}
});
};
valideForms('#consultation-form');
valideForms('#consultation form');
valideForms('#order form');
$('input[name=phone]').mask("+7 (999) 999-99-99");
$('form').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "mailer/smart.php",
data: $(this).serialize()
}).done(function() {
$(this).find("input").val("");
$('#consultation, #order').fadeOut();
$('.overlay, #thanks').fadeIn('slow');
$('form').trigger('reset');
});
return false;
});