Javascript Jquery验证在折叠的引导面板上不起作用

好的，对于我的HTML，我有一个引导折叠，里面有一些表单字段

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-success">
       <div class="panel-heading" role="tab" id="generalHeading">
          <h4 class="panel-title">General</h4>
       </div>
       <div id="generalInfo" class="panel-collapse collapse in" role="tabpanel">
          ...
       </div>
    </div>
</div>

一般的
...

具有多个面板，显然是上面示例中

…

所在的表单字段

然后，我将表单提交给jquery验证。如果我“打开”上面的所有面板，验证将工作。如果我像它应该做的那样做，并且只打开最后一个面板，其中只有submit按钮，那么验证就会像没有问题一样运行。它看不到折叠面板中的字段

我还没有找到任何答案，希望社区能帮助我

当引导面板折叠时，如何运行jquery验证？

根据要求，我已经创建了一个

一旦你加载小提琴并尝试提交表单（向下滚动预览）你就会看到恼人的警报，它会告诉你表单缺少必填字段。这是应该发生的

现在，如果您滚动到HTML中的

第90行

，并删除以下div的类名中的

：


然后重新加载小提琴，然后浏览面板并再次尝试提交，你会发现你没有收到任何恼人的警报或通知。除非你收到一份通知说表格已经提交

这就是问题所在，因为它无法捕捉到您没有输入姓名或电子邮件地址。
至于问题-隐藏（元素折叠时会发生这种情况）输入字段在验证过程中被忽略。要避免这种情况，可以设置选项：


注意：在上述示例中，您将无法引导用户返回无效的输入字段，因为它们实际上隐藏在
折叠的
部分中。但是，您可以使用回调“解压”该部分：

invalidHandler: function(e,validator) {
    // loop through the errors:
    for (var i=0;i<validator.errorList.length;i++){
        // "uncollapse" section containing invalid input/s:
        $(validator.errorList[i].element).closest('.panel-collapse.collapse').collapse('show');
    }
}


设置“继续”按钮手动单击事件：

$('.continue').click(function(e){
    e.preventDefault();
    var sectionValid = true,
        section = $(this).closest('.panel-collapse.collapse');
    // check if fields of this section are valid:
    $.each(section.find('input, select, textarea'), function(){
        if(!$(this).valid()){
            sectionValid = false;
        }
    });
    // toggle sections if fields are valid / show error if they're not:
    if(sectionValid){
        // collapse current section:
        section.collapse('toggle');
        // find and uncollapse next section:
        section.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle');
    }
});

$（this）.valid（）将使用为表单设置的验证
规则，为当前节中的每个输入返回
true
/
false
：

$("#ticketForm").validate({
    // ...
    rules: {
        name: "required",
        email: {
            required: true,
            email: true,
        },
        // ...
    },
    // ...
});


请发布所有相关代码，而不仅仅是您认为相关的代码。创建一个新的应用程序也会有所帮助。答案通常不是我们最初认为的那样。检查更新的问题，我创建了一个js提琴。JSFIDLE很棒，但它不能代替将代码放入问题中。根据本网站的指导原则，也包括问题本身的代码。谢谢。请让您的答案更加独立，这样它就不会依赖JSFIDLE来查看代码。谢谢
$('.continue').click(function(e){
    e.preventDefault();
    var sectionValid = true,
        section = $(this).closest('.panel-collapse.collapse');
    // check if fields of this section are valid:
    $.each(section.find('input, select, textarea'), function(){
        if(!$(this).valid()){
            sectionValid = false;
        }
    });
    // toggle sections if fields are valid / show error if they're not:
    if(sectionValid){
        // collapse current section:
        section.collapse('toggle');
        // find and uncollapse next section:
        section.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle');
    }
});

$("#ticketForm").validate({
    // ...
    rules: {
        name: "required",
        email: {
            required: true,
            email: true,
        },
        // ...
    },
    // ...
});