表单提交被 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>

在<form>

中添加data-toggle="validator"

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

和bootstrap验证器代码示例

$(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" 在 submit 按钮中，其中类型也是 type="submit" (Fiddle with name & id = submit) reason unknown why bootstrapvalidator not submit the form, possible a bug may be it got confused what to do with input where type="submit" id="submit" name="submit" so either remove id="submit" name="submit" (Fiddle without name & id = submit) or change to something different then type="submit" like id="sub" name="sub" (Fiddle with name & id = sub)

Answer 2

id 和 name "submit" 是问题之一，另一个问题是：

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

我试图捕获验证器的 return 状态，这会阻止表单提交。 PS：我也尝试过不使用 preventDefault() 但完全没有成功，所以我删除了所有这些代码，现在它可以正常工作了。

表单提交被 bootstrapValidator 阻止

Form submission blocked by bootstrapValidator

php

forms

submission

block

bootstrapvalidator