Javascript 具有多个输入的.form组上的jQuery验证

使用插件，我为我的引导

表单定义了以下内容：

$(".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');
    }
});

它适用于简单的表单。但是，当
窗体组
包含需要验证的多个输入（内联）时，具有
高亮显示
和
取消高亮显示
的部分不起作用：

<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>

但我得到了以下错误：

Uncaught RangeError: Maximum call stack size exceeded

你知道为什么吗？我尝试了很多方法，但每次都会出现同样的错误

编辑
如果可能的话，我更喜欢使用
div.form-group
have
。has error
类（因为样式）

编辑2
演示该问题。
您正在调用一个调用另一个函数的函数，以此类推，直到达到调用堆栈限制。我假设问题出在调用
.valid（）
时的
循环中

但是你不应该做这些。您不应该针对
表单组
，而应该针对特定的输入，这样您就不必更改
unhighlight
功能。例如：

<div class="form-group">
    <label class="col-md-4 control-label">State &amp; Zip</label>
    <div class="col-md-3 inputToValidate">
        <select class="form-control required" name="state">
            ...
        </select>
    </div>
    <div class="col-md-3 inputToValidate">
        <input type="text" class="form-control required" name="zip">
    </div>
</div>

$(".form-with-validation").validate({
    errorClass: "help-block",
    errorElement: "span",
    highlight: function(element) {
        $(element).closest('.inputToValidate').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.inputToValidate').removeClass('has-error');
    }
});

如果可能的话，我更喜欢使用div.form-group have.has error类

使用插件提供的选项是不可能的。在正在验证的元素上切换有效/无效类。可以修改
高亮显示
和
取消高亮显示
函数，以便使用jQuery DOM遍历等在其他元素上切换类

然而，当父容器的任何子容器无效时，您需要使其“无效”的逻辑。。。插件没有为此配备。一旦无效的子元素触发父元素上的错误类，任何有效的子元素都会将有效类应用于同一父元素

解决方法是使用外部
keyup
和
change
处理程序，它查看所有同级输入元素上的类，并相应地切换其父类。基于您自己的代码和未经测试的

$('input, select').on('keyup change', function() {
    var formGroup = $(this).closest('.form-group');
    var formGroupIsValid = true;
    formGroup.find('input, select').each(function(){
        if (! $(this).valid()) {
            formGroupIsValid = false;
        }
    });
    if (formGroupIsValid) {
        formGroup.removeClass('has-error');
    } else {
        formGroup.addClass('has-error');
    }
});

我得到以下错误：
未捕获范围错误：超过最大调用堆栈大小
。。。。你知道为什么吗

是的，您正在从
.validate（）
方法中调用
.valid（）
方法（通过
unhighlight
）。因此，在此方法中调用
$（this）.valid（）
只会导致再次调用
取消高亮显示。。。无限期地等等。
您不必将表单与验证类一起使用，您可以通过选择InputOvalidate类将要验证的所有表单字段作为目标。它也简单得多。您可能还想使用toggleClass

$(".inputToValidaten").validate({
    errorClass: "help-block",
    errorElement: "span",
    highlight: function(element) {
        $(this).toggleClass('has-error');
    },
    unhighlight: function(element) {
        $(this).toggleClass('has-error');
    }
});

更新和编辑

嗯。下面的代码将使用表单控件类处理任何嵌套表单字段。它将向上抓取与表单组类最接近的元素，然后向其中添加验证代码

$(".form-control").validate({
    errorClass: "help-block",
    errorElement: "span",
    highlight: function(e) {
        $(e.target).closest('.form-group').toggleClass('has-error');
    },
    unhighlight: function(e) {
        $(e.target).closest('.form-group').toggleClass('has-error');
    }
}); 

这是我最终得到的解决方案。这比我想象的要简单。正如人们之前指出的，任何
表单组
一次只能包含一个
表单控件
。因此，最简单的解决方案是将第二个
表单组
放在第一个表单组内，然后将第二个
表单控件
放在其中：

<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样式，它就可以完美地工作，看起来也不错。这里有一个。
我试图坚持使用
.formgroup
，因为如果我以最接近的
div
为目标，我的CSS样式就会混乱。不过还是要谢谢你的意见@Alex哦，我明白了，你还想在标签上显示红色吗？或者你在谈论其他css？您仍在离开表单组，因此其他css应保持不变。如果其任何子级无效，OP希望将错误类应用于父级。。。这与您向我们展示的非常不同。您在这里设置
.validate（）
的方式使用这些选项，您只能将其附加到单个表单元素，而不能附加到一类输入。只是工作不是这样的。谢谢你详细的回答。不幸的是，这种变通方法对我不起作用。。。我创建了一个示例来演示这一点。请你快看一下好吗？
<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>