具有多个输入的.form-group上的jQuery验证
亚历克斯
使用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');
}
});
它适用于简单的形式。但是，当和包含需要验证的多个输入（内联）时，带有highlight和的部分unhighlight不起作用.form-group：
<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>
问题是，例如，一旦选择了一个状态，即使同级输入（即zip）仍然无效（即在其下方有一个跨度），输入也将变为有效，并且.form-group其父级将丢失.has-error类：.help-block
因此，我将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
有什么想法吗？我尝试了许多方法，但是每次遇到相同的错误时，都会遇到这种情况。
编辑
我宁愿坚持使用div.form-group有.has-error可能的话（因为造型）类。
编辑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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
jQuery选择具有多个类的输入
- 2
具有隐藏输入的多个JQuery Datepicker
- 3
具有多个规则的jQuery Form Validation插件
- 4
JavaScript / Jquery：具有多个id的多个输入值
- 5
具有多个变量的 Python 输入验证...简化了吗？
- 6
jQuery具有一个功能RegExp的多个输入
- 7
使用多个具有相同表单名称的组件时，Redux-form 验证会中断
- 8
使用simple_form构建具有多个关联输入的双嵌套表单
- 9
JQuery：如何访问具有相同ID的多个输入的特定文本输入？
- 10
具有多个输入字段的复合组件，在WebSphere 8.0中验证失败
- 11
具有相同名称的多个输入的Yii2验证规则
- 12
使用具有多个输入类型名称的javascript进行表单验证
- 13
Python Tkinter-具有相同验证的多个输入框
- 14
javascript - 如何验证具有多个相同名称的动态添加输入？
- 15
如何验证从 FormRequest 扩展的类中具有相同名称的多个输入
- 16
在SQL中处理具有多个输入源的表上的批量插入
- 17
jQuery从具有相同类的多个输入创建实时数组
- 18
jQuery-查找输入按类的一部分具有多个类
- 19
jQuery UI自动完成具有Ajax结果的多个输入字段
- 20
在具有相同类名 (jQuery) 的多个元素中定位单个输入时遇到问题
- 21
具有相同名称的多个输入字段的 Jquery 选择器
- 22
如何从多个具有相同名称的输入中获取值，其中使用jQuery动态创建输入字段？
- 23
.form-group具有元素内部的高度
- 24
具有400个输入字段的jQuery表单验证
- 25
多个元素具有相同标签的网页上的文本验证
- 26
发送具有多个参数的Multipart / Form请求？
- 27
发送具有多个参数的Multipart / Form请求？
- 28
具有simple_form的多个单选按钮（星级评定）
- 29
多个jQuery Datepicker具有开始和结束验证
我来说两句