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