0

当我尝试提交使用 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>
4

2 回答 2

0

移除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"按钮内submit，其中类型也是type="submit"（Fiddle with name & id = submit）原因未知为什么 bootstrapvalidator 不提交表单，可能是一个错误，可能是混淆了什么与输入有关，type="submit" id="submit" name="submit"因此要么删除id="submit" name="submit"（Fiddle without name & id = submit）或更改为不同的东西，然后type="submit"喜欢id="sub" name="sub"（Fiddle with name & id = sub）

于 2015-09-30T19:56:22.537 回答
0

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() 但根本没有成功，所以我删除了所有这些代码，现在它可以正常工作了。

于 2015-10-01T08:48:38.070 回答