Hej :)
Krótko - kliknięcie w przycisk otwiera popup (.hover_pop), trzeba wpisać numer telefonu (poprawny), jeśli nie jest poprawny to pokazuje się error, jeśli jest poprawny wyświetla się kolejny popup (hover_pop4). Niestety nie potrafię zrobić, żeby popup wyświetlał się dopiero gdy numer przechodzi walidację.
Proszę o pomoc.
HTML
<section id="section9">
<div class="send_txt" style="text-align: center;">
<a class="open_pop">ZAMAWIAM</a>
</div>
</section>
<div class="hover_pop" id="hover_pop">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<div class="comenda_wrap">
<h3>Wyślij coś tam</h3>
<form id="form" action="" method="post">
<input type="text" id="tel" value="" class="tel required" placeholder="Numer" name="tel" minlength="9" maxlength="9" aria-required="true">
<input id="submit" class="wyslij" name="wyslij" type="submit" value="Wyślij">
</form>
</div>
</div>
</div>
<div class="hover_pop4" id="hover_pop4">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<div class="content_pop4">
<p>wysyłka info</p>
<p>chcesz poprawić dane?</p>
<input id="change_tel" class="open_pop change_tel" name="change_tel" type="submit" value="Zmień">
<input id="send_sms" class="open_pop5 send_sms" name="send_sms" type="submit" value="Wyślij">
</div>
</div>
</div>
JS
$(document).ready(function () {
$("#form").validate({
rules: {
tel: {
required: true,
number: true,
minlength: 9
}
},
messages: {
tel: {
required: "Proszę podać numer telefonu",
minlength: "Proszę podać poprawny numer telefonu",
number: "Proszę podać poprawny numer telefonu"
}
},
});
// first popup
$(".open_pop").click(function(){
$('.hover_pop').show();
});
$('.popupCloseButton').click(function(){
$('.hover_pop').hide();
});
$('.popupCloseButton').click(function(){
$('.hover_pop4').hide();
});
})