Verhindern, dass das Bootstrap-Formular geöffnet wird, wenn ein Validierungsfehler auftritt

Question

Ich erstelle ein Anmeldeformular mit Bootstrap und Code-Signierer.

Der Prozessablauf: Wenn sich jemand anmeldet, sollte ein Modal erscheinen, der nach einem OTP (One Time Password) fragt. Das Modal sollte offen bleiben, bis das OTP nicht eingegeben wird.

Dies konnte ich erreichen.

Das Problem Ich möchte das modale sollte nicht angezeigt werden, wenn das Anmeldeformular Validierungsfehler hat. Das Modal sollte nur angezeigt werden, wenn im Anmeldeformular kein Validierungsfehler vorliegt.

Momentan passiert, dass, selbst wenn ich das Anmeldeformular leer lasse und auf den Submit Button klicke, die Validierungsfehler im Hintergrund erscheinen, aber auch das Modal erscheint. Wie kann ich das verhindern?

S.S .: Das OTP wird erst generiert, wenn das Formular validiert ist und daher kein Problem darstellt.

Die Codes: Das Anmeldeformular:

<div class="modal fade bs-example-modal-sm" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-sm"> 
    <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <h4 class="modal-title">Your OTP number is sent on your register mobile number</h4> 
      <div id="wrong_otp" style="color:red"> 
       <h4 class="modal-title">Your OTP number does not match!!!</h4> 
      </div> 
     </div> 

     <div class="modal-body"> 
      <div class="tab-pane active in" id="login"> 
       <form id="otp" action="" method="post" enctype="multipart/form-data"> 
        <div class="ptop-10"></div> 

        <div class="col-md-12"> 
         <input type="text" class="signup" value="" placeholder=" Please Enter OTP Number" name="otp" id="otp" required="required"> 
         <br /> 
         <input type="hidden" class="signup" value="" name="otp_email" id="otp_email"> 
         <br /> 
         <input type="hidden" class="signup" value="" name="otp_password" id="otp_password"> 
         <br /> 
         <div class="ptop-10"></div> 
         <div class="ptop-5"></div> 
        </div> 

        <div class="ptop-10"> 
         <div class="ptop-5"></div> 
         <center><button type="submit" class="btn btn-musturd">Submit</button></center> 
        </div> 
       </form>     
      </div> 
     </div> 

     <div class="modal-footer"> 
     </div> 
    </div> 

der Code für die OTP Modal:

<!--for individual register--> 
$("#individual").submit(function(event){ 
    var email = $("#email").val(); 
    // alert(email); 

    var pass = $("#password").val(); 
    $("#otp_email").val(email); 
    $("#otp_password").val(pass); 
    $("#wrong_otp").hide(); 

    // cancels the form submission 
    event.preventDefault(); 

    $.ajax({ 
     type: "POST", 
     url: "<?php echo base_url(); ?>index.php/signup", 
     data:$(this).serialize(), 
     success : function(text){ 
      // event.preventDefault(); 

      if (text==1){ 
       // $("#view_preview").click(); //place this code 
       // window.location.href="<?php echo base_url(); ?>index.php/signup/myaccount"; 
      } 
      else 
      { 
       // $("#wrong_otp").show(); 
      } 
     } 
    }); 
}); 

function formSuccess(){ 
    //$("#view_preview").click(); //place this code 
} 

<!--for individual register--> 
<!--for individual register--> 
$("#otp").submit(function(event){ 
    $("#wrong_otp").hide(); 

    // cancels the form submission 
    event.preventDefault(); 

    $.ajax({ 
     type: "POST", 
     url: "<?php echo base_url(); ?>index.php/signup/otp_check", 
     data:$(this).serialize(), 
     success : function(data){ 
      alert(data); 
      if (data=='ok'){ 
       $("#myModel").hide(); 
       window.location.href="<?php echo base_url(); ?>index.php/signup/myaccount"; 
      } 
      else 
      { 
       $("#wrong_otp").show(); 
      } 
     } 
    }); 
}); 


<!--function formSuccess(){ 
//$('#myModal').modal('show'); 
//$('#myModal').modal('toggle'); 
//$('#myModal').modal('show'); 
// $("#msgSubmit").removeClass("hidden"); 
//}--> 

<!--for individual register--> 
</script> 

Answer 1

Sie können versuchen, das Formular selbst zu validieren und verwenden, um die Validierung Erfolg/Misserfolg zu Anzeige OTP modal ..

$("#individual").submit(function(e){ 
    var email = $("#email").val(); 
    var pass = $("#password").val(); 

    $("#otp_email").val(email); 
    $("#otp_password").val(pass); 

    $("#wrong_otp").hide(); 
    // cancels the form submission 
    event.preventDefault(); 

    // Do your validation here 
    if(myValidateFunc(email, password) == true) //success 
    { 
     //post the data using ajax 
     $.ajax({ 
     type: "POST", 
     url: "<?php echo base_url(); ?>index.php/signup", 
     data:$(this).serialize(), 
     success : function(){  
     } 
     }); 
     // Display the otp modal 
     $("modalDiv").modal("show"); 
     // modify #modalDiv according to name of your otp modal 
    } 
    else 
    { 
     // Display validation errors 
    } 
});