如果發生驗證錯誤，防止打開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
    }
});