JSFiddle - React, Tailwind, and code Playground
HTML
<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>
<div class="popup">
popup
</div>
CSS
.popup {
display: none;
}
JavaScript
$('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();
});