bootstrapValidator阻止表单提交

Question

当我试图提交一个使用bootstrapValidator()验证字段的表单时遇到了问题->没有提交，没有执行php文件(我知道这是因为我尝试过不使用booststrapValidator，它可以工作)。有什么想法吗？

表单如下所示：

<form id="contactForm"  class="form-horizontal" role="form" action="contact_form.php" method="post">
      <div class="form-group">
        <label class="control-label col-sm-2" for="name">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="name" name="name" placeholder="Name">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email</label>
        <div class="col-sm-10"> 
          <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
        </div>
      </div>
      <div class="form-group"> 
        <label class="control-label col-sm-2" for="msg">Mesage</label>
        <div class="col-sm-10"> 
            <textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
        </div>
      </div>
      <div class="form-group">
        <label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
        <div class="col-sm-10"> 
          <input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
        </div>
      </div>
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10">
          <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send"></button>
        </div>
      </div>
</form>

Answer 1

从id="submit" name="submit"和</button>中删除

<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send"></button>

在data-toggle="validator"中添加<form>

<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">

所以完整的表格将是

<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">
    <div class="form-group">
        <label class="control-label col-sm-2" for="name">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="msg">Mesage</label>
        <div class="col-sm-10">
            <textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
        </div>
    </div>
    <div class="form-group">
        <label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" class="btn btn-primary" value="Send">
            </button>
        </div>
    </div>
</form>

和引导验证程序代码示例

$(document).ready(function(){
    $('#contactForm').bootstrapValidator({
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded: [':disabled'],
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The Full Name field is required'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The Email field is required'
                    }
                }
            },
            msg: {
                validators: {
                    notEmpty: {
                        message: 'The Message field is required'
                    }
                }
            },
            captcha: {
                validators: {
                    notEmpty: {
                        message: 'The Captcha field is required'
                    }
                }
            }
        }
    });
});

并且它将在验证后提交表单，验证后不提交的实际原因是id="submit" name="submit" is submit按钮，其中类型也是type="submit" (篡改姓名)原因未知，为什么引导验证器不提交表单，可能是一个错误，可能是在type="submit" id="submit" name="submit"删除id="submit" name="submit" (没有名字的小提琴& id =提交)或更改到与id="sub" name="sub" (摆弄名号)不同的输入时，可能出现了错误。

Answer 2

id和名字“提交”是问题之一，另一个问题是：

$("#contactForm").submit(function(ev){
ev.preventDefault();
});
$("#sbm").on("click", function(){
 var bootstrapValidator = $("#contactForm").data('bootstrapValidator');
 bootstrapValidator.validate();

if(bootstrapValidator.isValid())
    //setTimeout(function(){$("#success").show();}, 300);
    error = true;
    $("#contactForm").submit();
else return;
});

我试图捕获验证器的返回状态，从而阻止表单提交。PS:我也尝试过没有preventDefault()，但没有成功，所以我删除了所有这些代码，现在它工作正常。