Как сделать появление Pop-up после отправки формы?

327

10 декабря 2016, 10:35

Есть данная форма

<form method="post">
        <input type="text"  placeholder="Your name" autofocus required pattern="[a-z]{1,15}"/> 
        <input type="text" placeholder="Phone-number" required pattern="[0-9]{6,15}"/>
        <input type="email" placeholder="Email" required/> 
        <input class="button" type="submit"  rel="reg_form" value="request call"/>
      </form>

так я реализовал Pop-up

<div class="popup reg_form">
          <span class="home"></span>
      <p class="popup_p">Request sent!</p>
      <p>We will call you as soon as we can.</p>
        <a class="close" href="#">Close</a>
        <button class="close">Close</button>
        </div>

$(function () {
    $('input.button').click(function () {
        $('div.'+$(this).attr("rel")).fadeIn(500);
        $("body").append("<div id='overlay'></div>");
        $('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
        return false;               
    }); 
    $('a.close').click(function () {
        $(this).parent().fadeOut(100);
        $('#overlay').remove('#overlay');
        return false;
    });
    $('button.close').click(function () {
        $(this).parent().fadeOut(100);
        $('#overlay').remove('#overlay');
        return false;
    });
    });

но он появляется, как только я нажму на submit, а надо, когда я нажму, пройдет валидация, и если все поля заполнены успешно, отправит форму и покажет pop-up. Kак это осуществить?

Answer 1

Можно проверить каждое поле на заполнение таким образом:

$('form').submit(function(e) {
  var empty = $(this).parent().find("input").filter(function() {
    return this.value === "";
  });
  if (!empty.length) {
    //Если все графы заполнены, то показываем popup
    $('.popup').show();
    //очищаем все данные текстовых полей, кроме кнопок
    $('form input').not(':button, :submit').val('');
  }
  e.preventDefault();
});

empty - определяет пусто ли в полях, далее обратным условием проверяем empty и показываем popup. parent() - обращается к родителю кнопки. find()непосредственно ищет элементы input на родительском уровне.

Посмотрите как работает: https://jsfiddle.net/kjp3k7f6/2/

UPD: Добавил метод очистки текстовых полей, и обновил ссылку.

Answer 2

Обрабатывайте форму событием .submit() с блокировкой отправки формы методом .preventDefault(). Сабмит будет уже обрабатываться непосредственно от какого-то id самой формы, а не от её фрагмента. Залил на фиддл. https://jsfiddle.net/83d06fjx/