Как скрыть форму после фактически успешной отправки данных?

Question

[vikholodov]

В общем, беда в чем: независимо заполнены ли инпуты или нет, срабатывает событие успешной отправки данных и форма скрывается, появляется блок с сообщение об успешной отправки данных. Нужно сделать так, чтобы пустые поля не отправлялись и срабатывал html5 валидация email, прежде чем сработает обработчик. Делается все это дело на wordpress

<div class="form_unisender box-shadow-sidebar">
                <h2 class="text-center">Подписка</h2>
                <div class="d-flex space-between align-items-center form_unisender_inside">
                    <div class="d-flex align-items-center">
                        <img src="'. get_template_directory_uri().'/images/form_precent.png" alt=""><span>Акции и спецпредложения банков и МФК</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <img src="'. get_template_directory_uri().'/images/form_tick.png" alt=""><span>Подписка на изменение кредитного рейтинга</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <img src="'. get_template_directory_uri().'/images/form_play.png" alt=""><span>Полезные статьи, инфографика и видео</span>
                    </div>
                </div>
                <div class="d-flex form_unisender_form content-center">
                    <form id="ajax_form" class="text-center d-flex align-items-center" method="POST" action="">
                        <input name="unisender_email" class="" type="email" placeholder="Email">
                        <input name="unisender_name" type="text" placeholder="Имя">
                        <button id="ajax_form_btn" type="submit" class="search-btn">Подписаться</button>
                    </form>
                </div>
            </div>
            <div id="ajax_form_success" class="d-flex flex-column text-center">
                <img src="'. get_template_directory_uri().'/images/checked_form.png" alt="">
                <h2>Спасибо за подписку</h2>
                <p>Ваши даные успешно отправлены.</p>
            </div>

$( document ).ready(function() {
    $("#ajax_form_btn").click(
        function(){

            sendAjaxForm('result_form', 'ajax_form', 'vik_form.php');
            return false; 
        }
    );
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        beforeSend: function(){

        },
        url:     url,
        type:     "POST",
        dataType: "html",
        data: jQuery("#"+ajax_form).serialize(),  
        success: function(response) { //Данные отправлены успешно
            result = jQuery.parseJSON(response);
            $('.form_unisender').hide();
            $('#ajax_form_success').show();
        },
        error: function(response) { // Данные не отправлены
            document.getElementById(result_form).innerHTML = "Иформация ведена не верно. Проверьте правильность введенных данных и повторите попытку";
        },

    });
}

Answer 1

[vikholodov]

Ура, товарищи. Рабочий код:

$( document ).ready(function() {
    $("#ajax_form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "vik_form.php",
            data: $(this).serialize()
        }).done(function () {
            
            $(".form_unisender").hide();
            $("#ajax_form_success").show();
        });
        return false;
    });
});

Answer 2

[Exploding]

Добавить required для полей

<form id="ajax_form" class="text-center d-flex align-items-center" method="POST" action="vik_form.php">
   <input name="unisender_email" class="" type="email" placeholder="Email" required>
   <input name="unisender_name" type="text" placeholder="Имя" required>
   <button type="submit" class="search-btn">Подписаться</button>
</form>
<hr>
<div id="ajax_form_success" class="d-flex flex-column text-center">
     <!--не надо тут Н2 и спасибы разные:) Оно ж в индекс попадет, и будет мешать только-->          
 </div>

function sendAjaxForm:

$("#ajax_form").submit(function(e){
   $("#ajax_form_success").html(" <h2>Спасибо за подписку!</h2><p>Ваши даные успешно отправлены. Ждите и что-то случиться!</p>");
   e.preventDefault();
});

Comments

[Александр]

а если в форме ошибки будут? все равно же блок благодарности появится ?

[Exploding]

Александр, Ну вообще, можно для валидации значений элементов формы использовать атрибут pattern="регурярное выражение" (html 5), тогда предполагая, что пользователь "нормально" использует форму - сообщение благодарности будет работать логично.
Также можно просто изменить текст на "Спасибо! Сообщение принято в обработку" - это не намекает на то, что все нормально.
В идеале, аяксом отправлять форму и это злосчастное сообщение выводить результатом работы php-обработчика.

Answer 3

[Alexey Bille]

Хороший валидатор бутстрапа 1000hz.github.io/bootstrap-validator

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
  }
})