javascript - 具有多个输入的 .form-group 上的 jQuery 验证

Question

使用 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 &amp; 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来证明这个问题。

Answer 1

这是我最终得到的解决方案。这比我想象的要简单。正如人们之前指出的那样，任何 form-group 都应该一次只包含一个 form-control。因此，最简单的解决方案是将第二个 form-group 放在第一个里面，然后将第二个 form-control 放在那里:

<div class="form-group">
    <label class="col-md-4 control-label">State &amp; 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 .