jQuery FormValidation 在 Bootstrap 多选项卡中不起作用
jQuery FormValidation don't work inside of Bootstrap multi tab
我在使用 FormValidation 验证多选项卡(Bootstrap 主题)中的 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
JQuery FormValidation 已经解决Validation问题
通过替换 jquery,选项卡之间的验证工作
您可以在验证函数中添加 "ignore",这对我来说效果很好
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});
我在使用 FormValidation 验证多选项卡(Bootstrap 主题)中的 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
JQuery FormValidation 已经解决Validation问题 通过替换 jquery,选项卡之间的验证工作
您可以在验证函数中添加 "ignore",这对我来说效果很好
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});