There is this form

<form method="post"> <input type="text" placeholder="Your name" autofocus required pattern="[az]{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>

so i implemented 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; }); });

but it appears as soon as I click on submit , but when I click, it will be validated, and if all the fields are completed successfully, it will send the form and show pop-up . How to do this?

  • How do you process the form? form data where go and where errors are processed? - Maqsood pm
  • @Maqsood the fact of the matter is that I do not need it! It is necessary, if the fields are not filled in, do not show the popup, if all are filled in, after clicking the submit, clear the form and show the popup - Dmitry
  • @Maqsood, but how would you make sure that after clicking submit, the inputs are also cleared? - Dmitriy

2 answers 2

You can check each field for filling in this way:

 $('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 - whether the field is empty, then the opposite condition is to check empty and show popup. parent() - refers to the parent of the button. find() directly searches for input elements at the parent level.

See how it works: https://jsfiddle.net/kjp3k7f6/2/

UPD: Added a method for clearing text fields, and updated the link.

  • Thank you very much! Can you recommend any lessons on JS and JQ? I would be grateful - Dmitry

Handle the form with a .submit() event with the form .submit() blocked with the .preventDefault() method. The submit will be processed directly from some id of the form itself, and not from its fragment. Filled on fiddle. https://jsfiddle.net/83d06fjx/

  • super, what you need! But how to make it so that after clicking submit, the inputs are also cleared? - Dmitriy
  • @ Dmitry answered above) - Eduard Misk