使用 jQuery Validation插件,我为我的 Bootstrap form
定义了以下内容:
$(".form-with-validation").validate({
errorClass: "help-block",
errorElement: "span",
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
它适用于简单的表单。但是,当 .form-group
包含需要验证的多个输入(内联)时,带有 highlight
和 unhighlight
的部分不起作用:
<div class="form-group">
<label class="col-md-4 control-label">State & Zip</label>
<div class="col-md-3">
<select class="form-control required" name="state">
...
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control required" name="zip">
</div>
</div>
问题是,例如,一旦您选择了一个状态,输入就变得有效,并且它的 .form-group
父级 丢失了 .has-error
类,即使 sibling input(即 zip)仍然无效(即下面有一个 .help-block
span) :
因此,我将 unhighlight
部分更改为以下内容:
unhighlight: function(element) {
var formGroup = $(element).closest('.form-group');
var formGroupIsValid = true;
formGroup.find('input').each(function(){
if (! $(this).valid())
formGroupIsValid = false;
});
if (formGroupIsValid)
formGroup.removeClass('has-error');
}
但是我得到以下错误:
Uncaught RangeError: Maximum call stack size exceeded
有什么想法吗?我尝试了很多方法,但每次都出现相同的错误。
编辑
如果可能(因为样式),我宁愿坚持使用具有 .has-error
类的 div.form-group
。
编辑 2
Jsfiddle来证明这个问题。
最佳答案
这是我最终得到的解决方案。这比我想象的要简单。正如人们之前指出的那样,任何 form-group
都应该一次只包含一个 form-control
。因此,最简单的解决方案是将第二个 form-group
放在第一个里面,然后将第二个 form-control
放在那里:
<div class="form-group">
<label class="col-md-4 control-label">State & Zip</label>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<select class="form-control required" name="state">
...
</select>
</div>
<div class="col-sm-6 form-group" style="margin-bottom:0;padding-right:0">
<input type="text" class="form-control required" name="zip">
</div>
</div>
</div>
</div>
仅需几个 CSS 样式,就可以完美地工作并且看起来也不错。这是一个 jsfiddle .
关于javascript - 具有多个输入的 .form-group 上的 jQuery 验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41401905/