我在bootstrap选项卡中使用bootstrap验证，并且我在大多数情况下都使用它。
但是，我正在使用这段代码来引导您找到最接近的错误。
$("#application").validate({
ignore: "",
rules: {
resumeField: {
required: true,
require_from_group: [1,".required-group"]
},
resumePaste: {
required: function()
{
CKEDITOR.instances['resumePaste'].updateElement();
},
require_from_group: [1,".required-group"],
}
},
messages: {
resumeField: "Please select your Resume",
resumePaste: "Please enter the contents of your resume"
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
$(element).closest('.form-group').addClass('has-error');
var tab = $(element).closest('.tab-pane').attr('id');
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
CKEDITOR.instances['resumePaste'].updateElement();
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function() {
return false;
}
});
以下是标签的HTML标记：
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#resumeTab" data-toggle="tab">Step 1 - Résumé</a></li>
<li><a href="#questionsTab" data-toggle="tab">Step 2 - Questions</a></li>
<li><a href="#proficienciesTab" data-toggle="tab">Step 3 - Proficiencies</a></li>
<li><a href="#submitTab" data-toggle="tab">Step 4 - Submit</a></li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="resumeTab">
<div class="page-header">
<h4><small>Select Résumé</small></h4>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
<i class="fa fa-file-text"></i> Browse <input type="file" name="resumeFile" id="resumeFile">
</span>
</span>
<input type="text" class="form-control required" name="resumeField" class="required_group" id="resumeField">
</div>
</div>
<!-- /input-group -->
<br />
<center>
<span class="text-primary">
<h3>- OR -</h3>
</span>
</center>
<div class="page-header">
<h4><small>Paste Résumé Contents</small></h4>
</div>
<div class="form-group">
<textarea class="col-xs-12 required_group" rows="10" name="resumePaste" id="resumePaste"></textarea>
<script>
CKEDITOR.replace( 'resumePaste' );
</script>
</div>
<br />
<button type="button" name="progressButton" tabID="questionsTab" class="btn btn-primary pull-right">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="tab-pane fade" id="questionsTab">
<?php $counter = 1; foreach($getApplication->internships->questions as $data){ ?>
<div class="panel panel-primary">
<div class="panel-heading">Question #<?php echo $counter; ?></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-5">
<h4 class="text-primary"><span name="question"><?php echo $data->question; ?></span></h4>
</div>
<div class="col-xs-7">
<textarea class="col-xs-12 question" rows="6" name="question[<?php echo $data->questionID; ?>]['answer']"></textarea>
<input type="hidden" name="question[<?php echo $data->questionID; ?>]['question']" value="<?php echo $data->question; ?>">
</div>
</div>
</div>
</div>
<?php $counter++; } ?>
<button type="button" name="progressButton" tabID="resumeTab" class="btn btn-primary pull-left"><i class="fa fa-arrow-left"></i> Previous</button>
<button type="button" name="progressButton" tabID="proficienciesTab" class="btn btn-primary pull-right">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="tab-pane fade" id="proficienciesTab">
<button type="button" name="progressButton" tabID="questionsTab" class="btn btn-primary pull-left"><i class="fa fa-arrow-left"></i> Previous</button>
<button type="button" name="progressButton" tabID="submitTab" class="btn btn-primary pull-right">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="tab-pane fade" id="submitTab">
<button type="button" name="progressButton" tabID="proficienciesTab" class="btn btn-primary pull-left"><i class="fa fa-arrow-left"></i> Previous</button>
<button type="submit" value="submit" name="doSubmit" class="btn btn-primary pull-right">Submit Application <i class="fa fa-cloud"></i></button>
</div>
</div>
</div>
</div>
问题是，我有4个选项卡，每个选项卡都会发现错误，标记为活动状态会使其混乱。
有没有办法将nearest（）限制为只有1个实例而不是全部？
如果我在标签4上并且1和2上有错误，我的目标是将它们带到第一个错误，即标签1。
有什么想法吗？