jQuery FormValidation 在 Bootstrap 多选项卡中不起作用答案

【问题标题】：jQuery FormValidation don't work inside of Bootstrap multi tabjQuery FormValidation 在 Bootstrap 多选项卡中不起作用
【发布时间】：2015-09-05 08:51:23
【问题描述】：

FormValidation 存在问题，无法在多选项卡（引导主题）中验证 form。当我单击 #tab-1 中的提交按钮时，formValidation 工作正常。但是当我更改为#tab-2 或#tab-3 时，#tab-1 中的字段验证不起作用并在没有验证的情况下提交form。

<form id="newstext" method="post" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-message="This value is not valid"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
  <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-1" data-toggle="tab"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</a></li>
        <li><a href="#tab-2" data-toggle="tab"><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</a></li>
        <li><a href="#tab-3" data-toggle="tab"><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</a></li>
  </ul>
  <div class="tab-content">
        <div class="tab-pane active" id="tab-1">
            <div class="panel-body">
                <div class="col-md-6">
                    <div class="form-group">

                            <label class="control-label">title *</label> 
                            <input id="title" name="title" type="text" placeholder="" class="form-control"
                            data-fv-notempty="true"
                            data-fv-notempty-message="The title is required" />
                    </div>
                    <div class="form-group">

                            <label class="control-label">abstract </label> 
                            <input id="abst" name="abst" type="text" placeholder="" class="form-control">

                    </div>
                </div>  
            </div>      
        </div>

        <div class="tab-pane" id="tab-2">
            <div class="panel-body">
                <div class="col-md-6">
                    <div class="form-group">

                            <label class="control-label">name</label> 
                            <input id="namee" name="namee" type="text" placeholder="" class="form-control">

                    </div>
                </div>  
            </div>
        </div>

        <div class="tab-pane" id="tab-3">
            <div class="panel-body">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label">show</label> 
                        <input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
                        <input name="show_callme" value="1" id="shows" type="checkbox">Bold
                    </div>
                </div>  
            </div>
        </div>

        <br>
        <button type="submit" class="btn btn-success">submit</button>
    </div>
</div>

请在Codepen查看我的代码

【问题讨论】：

这个例子很有帮助：formvalidation.io/examples/bootstrap-tab
很高兴我能帮上忙 :)

标签： validation tabs formvalidation-plugin

【解决方案1】：

这个例子可能会有所帮助：formvalidation.io/examples/bootstrap-tab

JQuery FormValidation 已经解决了验证问题通过替换 jquery，选项卡之间的验证工作

【讨论】：

【解决方案2】：

您可以在验证功能中添加“忽略”，这对我来说很好

 $("#form").validate({
      ...
      rules: {...},
      messages: {...},
      ignore: "",
      ...
 });

【讨论】：