运行 bootstrap 验证器与 ajax 一起出现问题

Question

我有一个注册表单，我想在上面申请 bootstrap validator 如果表格填写成功，它应该转到 ajax 部分，后端脚本将运行和数据被提交。

表格

<form data-toggle="validator" role="form"  id="signup-form" method="post">

    <input type="text" class="form-control" placeholder="Name" name="cname" id="cname" required>

    <input id="email" type="email" class="form-control" placeholder=" email" name="email" data-error="email address is invalid" required>

     <input type="password" class="form-control out-box" placeholder="Password" name="password" id="password" required>

    <button type="submit" class="btn btn-primary" id="submit_form">SIGN UP</button>

</form>

Ajax代码

$("#submit_form").click(function()
  {
    var cname = $("#cname").val();
    var email = $("#email").val();
    var password = $("#password").val();
    var dataString = 'cname='+ cname + '&email='+ email + '&password='+ password ;

    $.ajax({
      type: "POST",
      url: "<?php echo base_url(); ?>/student/register",
      data: dataString,
      cache: false,
      success: function(result){
        console.log(result);     
    }});
    return false;
  });

问题是，如果表单为空或有任何问题，我点击提交按钮，问题区域会突出显示，因为它在 bootstrap 验证器中出现，但在那之后 ajax 代码是也执行了。

我希望 ajax 代码只应运行当所有验证都已填写并且表单没有问题时。

Answer 1

试试下面的方法。

$('#signup-form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
     var cname = $("#cname").val();
    var email = $("#email").val();
    var password = $("#password").val();
    var dataString = 'cname='+ cname + '&email='+ email + '&password='+ password ;

    $.ajax({
      type: "POST",
      url: "<?php echo base_url(); ?>/student/register",
      data: dataString,
      cache: false,
      success: function(result){
        console.log(result);     
    }});
    return false;
  }
})

运行 bootstrap 验证器与 ajax 一起出现问题

Having issues while running bootstrap validator along with ajax

html

forms

validation

twitter-bootstrap

bootstrapvalidator