Как не отправлять незаполненную форму?

Помогите, пожалуйста!
Учусь по видеокурсу. Суть вопроса такая. На сайте есть формы обратной связи. Дело в том, что формы отправляются даже если поля не заполнены. Как сделать так, чтобы формы не отправлялись, если поля не заполнены? Я так понимаю, что надо в JS где-то и как-то правильно прописать, что если форма не прошла валидацию, то она не будет отправлена. Но до изучения JS мне ещё далековато, а разобраться с проблемой хочется сейчас. Отправка почты реализована через PHPMailer. Вот ссылка на сайт https://pulse.neverov.site/

Вот html код форм (модальные окна)
<div class="overlay">
        <div class="modal" id="consultation">
            <div class="modal__close">&times;</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">&times;</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">&times;</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;
    });
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы