0

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

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>'
    });

});

1 ответ 1

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;
}
7
  • Анимация, REQUIRED и отправка не срабатывают (((
    – Karen
    17 июн 2017 в 14:20
  • обновил ответ, пробуйте
    – LivAlex
    17 июн 2017 в 14:53
  • все так же молчит, ничего не происходит, но если вернуть type="submit" то валидация и отправка работает но без анимации и задержки
    – Karen
    17 июн 2017 в 15:02
  • Посмотрите разметку формы еще раз я обновил, вот как на самом деле она у меня выглядит из за сплывающего окна
    – Karen
    17 июн 2017 в 15:04
  • обновил ответ, пробуйте
    – LivAlex
    17 июн 2017 в 15:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.