Prevent Bootstrap Form from opening if validation error occurs

Question

I am creating a sign up form using bootstrap and codeigniter.

The Process Flow: When someone signs up, a modal should appear asking for an OTP (One Time Password). The modal should remain open till the OTP is not input.

This I have been able to achieve.

The Issue I want the modal should not appear if the sign up form has validation errors. The modal should pop up only if there is no validation error in the sign up form.

Currently what happens is that even if i leave the sign up form empty, and click on submit button, the validation errors appear in the background but the modal also pops up. How can i prevent this.

PS: The OTP is not generated till the form is validated and hence that wont be an issue.

The Codes: The Sign Up Form:

<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>

the code for the 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

You can try to validate the form yourself and use the validation success/failure to display 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
    }
});