Как сделать задержку submit в таком условии?

341

18 июня 2017, 18:30

Есть такой скрипт

function handleSubmit() {
        document.getElementById("application").submit();
    }
    function delaySubmit() {
        window.setTimeout(handleSubmit, 1000); // change this to whatever delay you need
    };

который устанавливает задержку пред нажатием submit в форме обратной связи, задержка нужна для исполнение анимации после нажатия на кнопку отправить

как мне реализовать задержку по клику в форме обратной связи по условию чтоб все поля были правильно/заполнены ? иначе он выполняет отправку без REQUIRED

разметка формы с required

document.querySelector('.openPopup').addEventListener('click', function() {
    var jPopupDemo = new jPopup({
        contentHtml: '<strong>Это быстро!</strong>\
         <p>Молниеносная регистрация, за 16 секунд</p>\
         <form id="application" action="application.php" method="POST" name="application">\
            <input name="name" id="applicationName" maxlength="20" placeholder="Имя и фамилия" autocomplete="off" required />\
            <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Ваш E-mail" autocomplete="off" required />\
            <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Номер телефона" autocomplete="off" required />\
            <button class="applicationButton" type="button" form="application"><p style="display:inline">Отправить</p><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path></svg></button>\
         </form>'
    });
});

Answer 1

Я правильно понимаю, задержка Вам нужна для реализации анимации? А что мешает при нажатии на submit-кнопку запускать анимацию, а по завершению ее - отправлять содержимое формы на сервер? Простейший вариант будет выглядеть примерно так (полу-псевдокод)

var form = document.querySelector('#application');
form.onsubmit = function (e) {
    e.preventDefault();
    doSomeAnimationHere();
}
function doSomeAnimationHere() {
    // тут код анимации
    form.submit();
}

P.S. Глянул код анимации. Там анимация делается с помощью css, а не js, поэтому нужно отложить submit формы на заданное время. У кнопки установить значение атрибута type='button' и убрать полностью атрибут onclick. Разметка должна быть такой

<form id="application" action="application.php" method="POST" name="application">
<input name="name" id="applicationName" maxlength="20" placeholder="Имя и фамилия" autocomplete="off" required />
<input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Ваш E-mail" autocomplete="off" required />
<input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Номер телефона" autocomplete="off" required />
<button class="applicationButton" type="button" form="application">
    <p style="display:inline">Отправить</p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
        <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
    </svg>
</button>

Такой код у меня отработал:

var $f = $('#application');
$('.applicationButton').click(function() {
    if (isDataValid()) {
      $(this).toggleClass('clicked');
      $('button p').text(function(i, text) {
        return text === "Sent!" ? "Send" : "Sent!";
      });
      setTimeout(function() { $f.submit(); }, 1300);            
    }
});
function isDataValid() {
    if ($f[0].name.checkValidity() && 
        $f[0].email.checkValidity() && 
        $f[0].telephone.checkValidity()) {
        return true;
    }
    return false;
}