验证表单后禁用引导验证程序

我正在运行带有Bootstrap验证的PHP注册表单。点击提交按钮后，当表单得到验证时，它不会重定向到登录页面，并且值不会存储在数据库中。验证表单后禁用引导验证程序

如何在验证后禁用Bootstrap验证？
点击提交按钮应该重定向到登录页面。当我不使用Bootstrap验证器时，它正常工作。

JavaScript代码（引导验证）

$(document).ready(function() { 
    $('#contact_form').bootstrapValidator({ 
     // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      first_name: { 
       validators: { 
         stringLength: { 
         min: 2, 
        }, 
         notEmpty: { 
         message: 'Please supply your first name' 
        } 
       } 
      }, 
      last_name: { 
       validators: { 
        stringLength: { 
         min: 2, 
        }, 
        notEmpty: { 
         message: 'Please supply your last name' 
        } 
       } 
      }, 
      email: { 
       validators: { 
        notEmpty: { 
         message: 'Please supply your email address' 
        }, 
        emailAddress: { 
         message: 'Please supply a valid email address' 
        } 
       } 
      }, 
      phone: { 
       validators: { 
        notEmpty: { 
         message: 'Please supply your phone number' 
        }, 
        phone: { 
         country: 'US', 
         message: 'Please supply a vaild phone number with area code' 
        } 
       } 
      }, 
      address: { 
       validators: { 
        stringLength: { 
         min: 8, 
        }, 
        notEmpty: { 
         message: 'Please supply your street address' 
        } 
       } 
      }, 
      city: { 
       validators: { 
        stringLength: { 
         min: 4, 
        }, 
        notEmpty: { 
         message: 'Please supply your city' 
        } 
       } 
      }, 
      state: { 
       validators: { 
        notEmpty: { 
         message: 'Please select your state' 
        } 
       } 
      }, 
      zip: { 
       validators: { 
        notEmpty: { 
         message: 'Please supply your zip code' 
        }, 
        zipCode: { 
         country: 'US', 
         message: 'Please supply a vaild zip code' 
        } 
       } 
      }, 

      } 
     }) 
     .on('success.form.bv', function(e) { 
      $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ... 
       $('#contact_form').data('bootstrapValidator').resetForm(); 

      // Prevent form submission 
      e.preventDefault(); 

      // Get the form instance 
      var $form = $(e.target); 

      // Get the BootstrapValidator instance 
      var bv = $form.data('bootstrapValidator'); 

      // Use Ajax to submit form data 
      $.post($form.attr('action'), $form.serialize(), function(result) { 
       console.log(result); 
      }, 'json'); 
     }); 
});

PHP代码（连接到数据库）

<?php include 'conn.php'; 
if(isset($_POST['submit'])){ 

    extract($_POST); 

    /*$imagetype=$_FILES["product_photo"]['type']; 
    $imagesize=$_FILES["product_photo"]['size']; 
    $imageArr=$_FILES['product_photo']; 
    move_uploaded_file($imageArr['tmp_name'], 'img/'.$imageArr['name']); 
    $product_photo=$imageArr['name'];*/ 


    $query="insert into form (first_name,last_name,password,email,phone,address,city,state,zip) values ('$first_name','$last_name','$password','$email','$phone','$address','$city','$state','$zip')"; 
    if ($conn->query($query)==true) { 
     header("location:login.php");  # code... 
    } 
    else{ 
     echo "Sorry , data not inserted"; 
    } 
} 
?>

HTML代码（注册表格！）

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Contact form</title> 
    <script type="text/javascript"></script> 



    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> 
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'> 

     <link rel="stylesheet" href="css/style.css"> 


</head> 

<body> 
    <div class="container"> 

    <form class="well form-horizontal" action="insertmaster.php" method="post" id="contact_form"> 
<fieldset> 

<!-- Form Name --> 
<legend>Sign Up!</legend> 

<!-- Text input--> 

<div class="form-group"> 
    <label class="col-md-4 control-label">First Name</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    <input name="first_name" placeholder="First Name" class="form-control" type="text"> 
    </div> 
    </div> 
</div> 

<!-- Text input--> 

<div class="form-group"> 
    <label class="col-md-4 control-label" >Last Name</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    <input name="last_name" placeholder="Last Name" class="form-control" type="text"> 
    </div> 
    </div> 
</div> 

<div class="form-group"> 
    <label class="col-md-4 control-label" >Password</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    <input name="password" placeholder="Password" class="form-control" type="password"> 
    </div> 
    </div> 
</div> 

<!-- Text input--> 
     <div class="form-group"> 
    <label class="col-md-4 control-label">E-Mail</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 
    <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> 
    </div> 
    </div> 
</div> 


<!-- Text input--> 

<div class="form-group"> 
    <label class="col-md-4 control-label">Phone #</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> 
    <input name="phone" placeholder="(845)555-1212" class="form-control" type="text"> 
    </div> 
    </div> 
</div> 

<!-- Text input--> 

<div class="form-group"> 
    <label class="col-md-4 control-label">Address</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
    <input name="address" placeholder="Address" class="form-control" type="text"> 
    </div> 
    </div> 
</div> 

<!-- Text input--> 

<div class="form-group"> 
    <label class="col-md-4 control-label">City</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
    <input name="city" placeholder="city" class="form-control" type="text"> 
    </div> 
    </div> 
</div> 

<!-- Select Basic --> 

<div class="form-group"> 
    <label class="col-md-4 control-label">State</label> 
    <div class="col-md-4 selectContainer"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> 
    <select name="state" class="form-control selectpicker" > 
     <option value=" " >Please select your state</option> 
     <option>Alabama</option> 
     <option>Alaska</option> 
     <option >Arizona</option> 
     <option >Arkansas</option> 
     <option >California</option> 
     <option >Colorado</option> 
     <option >Connecticut</option> 
     <option >Delaware</option> 
     <option >District of Columbia</option> 
     <option> Florida</option> 
     <option >Georgia</option> 
     <option >Hawaii</option> 
     <option >daho</option> 
     <option >Illinois</option> 
     <option >Indiana</option> 
     <option >Iowa</option> 
     <option> Kansas</option> 
     <option >Kentucky</option> 
     <option >Louisiana</option> 
     <option>Maine</option> 
     <option >Maryland</option> 
     <option> Mass</option> 
     <option >Michigan</option> 
     <option >Minnesota</option> 
     <option>Mississippi</option> 
     <option>Missouri</option> 
     <option>Montana</option> 
     <option>Nebraska</option> 
     <option>Nevada</option> 
     <option>New Hampshire</option> 
     <option>New Jersey</option> 
     <option>New Mexico</option> 
     <option>New York</option> 
     <option>North Carolina</option> 
     <option>North Dakota</option> 
     <option>Ohio</option> 
     <option>Oklahoma</option> 
     <option>Oregon</option> 
     <option>Pennsylvania</option> 
     <option>Rhode Island</option> 
     <option>South Carolina</option> 
     <option>South Dakota</option> 
     <option>Tennessee</option> 
     <option>Texas</option> 
     <option> Uttah</option> 
     <option>Vermont</option> 
     <option>Virginia</option> 
     <option >Washington</option> 
     <option >West Virginia</option> 
     <option>Wisconsin</option> 
     <option >Wyoming</option> 
    </select> 
    </div> 
</div> 
</div> 

<!-- Text input--> 

<div class="form-group"> 
    <label class="col-md-4 control-label">Zip Code</label> 
    <div class="col-md-4 inputGroupContainer"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
    <input name="zip" placeholder="Zip Code" class="form-control" type="text"> 
    </div> 
</div> 
</div> 


<!-- Text area --> 

<!-- Success message --> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label"></label> 
    <div class="col-md-4"> 
    <button type="submit" name="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button> 
    </div> 
</div> 

</fieldset> 
</form> 
</div> 
    </div><!-- /.container --> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> 

    <script src="js/index.js"></script> 

</body> 
</html>

** 
 

 
> LOGIN PAGE code(where it should redirect after everything validates) 
 

 
** 
 

 

 
    <!DOCTYPE html> 
 
    <html > 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Login Form</title> 
 
     <script type="text/javascript"></script> 
 

 

 
     
 
     <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 
 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> 
 
    <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'> 
 

 
      <link rel="stylesheet" href="css/style.css"> 
 

 
     
 
    </head> 
 

 
    <body> 
 
     <div class="container"> 
 

 
     <form class="well form-horizontal" action=" " method="post" id="contact_form"> 
 
    <fieldset> 
 

 
    <!-- Form Name --> 
 
    <legend>Login Now!</legend> 
 

 
    <!-- Text input--> 
 

 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label">UserName</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
     <input name="first_name" placeholder="UserName" class="form-control" type="text"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Text input--> 
 

 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label" >Password</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
     <input name="password" placeholder="Password" class="form-control" type="password"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Text area --> 
 
     
 
    <!-- Success message --> 
 

 
    <!-- Button --> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label"></label> 
 
     <div class="col-md-4"> 
 
     <button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button> 
 
     </div> 
 
    </div> 
 

 
    </fieldset> 
 
    </form> 
 
    </div> 
 
     </div><!-- /.container --> 
 
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> 
 

 
     <script src="js/index.js"></script> 
 

 
    </body> 
 
    </html>

来源

2017-02-18 arjuna

为什么你的'e.preventDefault（）;''里面。对（ 'success.form.bv'，函数（E）{'你能删除。并试试看？ –

我试过了，但没有改变... – arjuna

我发现在你的代码与正在使用的自举验证库版本没有问题，但问题。版本不匹配可能有问题。我通过更新验证器库版本来实现它。希望能帮助到你。

<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js'></script>

小提琴：https://jsfiddle.net/kn4wy60g/

来源

2017-02-19 01:22:50 mhshimul

不... ...只是你的警报消息弹出...没有注册页面保存在数据库中的值，也没有它重定向到登录页面..我想禁用确认器后，一切都验证... – arjuna

在小提琴中我没有权限发布，我没有你的后控制器，所以它显然不会在小提琴中工作，你应该在你的网站上做到这一点。验证成功，它不是t发射已解决的成功事件，现在你需要做任何你想做的事情。谢谢。 – mhshimul

其实我只在我的网站上做过..我也更新了引导验证器脚本，因为您在LOGIN页面和注册页面都告诉了这两个页面..需要的地方..仍然没有响应... – arjuna

验证表单后禁用引导验证程序

回答

相关问题