如果发生验证错误，防止打开Bootstrap表单

Question

我正在使用Bootstrap和Codeigniter创建一个注册表单。

处理流程：当有人注册时，将出现一个模版，要求输入OTP（一次性密码）。 在不输入OTP之前，模态应保持打开状态。

我已经能够实现。

如果注册表单存在验证错误，则我不希望出现的问题模式不会出现。 仅当注册表单中没有验证错误时，才会弹出模态。

当前发生的情况是，即使我将注册表单保留为空，然后单击“提交”按钮，验证错误也会在后台出现，但模式也会弹出。 我怎样才能防止这种情况。

PS：在验证表单之前不会生成OTP，因此这不会成为问题。

代码：注册表格：

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

OTP模式的代码：

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

您可以尝试自己验证表单，并使用验证成功/失败来显示OTP模式。

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