Jquery 验证不适用于折叠的引导面板

Question

好的，对于我的 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 验证。如果我“打开”上面的所有面板，验证将起作用。如果我按照它应该做的那样做并且只打开最后一个面板，其中只有提交按钮，验证运行就像它没有问题一样。它看不到折叠面板中的字段？

我无法找到任何答案，希望社区可以帮助我。

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

根据要求，我创建了一个JS Fiddle

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

现在，如果您滚动到 HTML 中的 line 90 并删除以下 div 的类名上的单词 in：

<div id="priorityInfo" class="panel-collapse collapse in" role="tabpanel">

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

这是问题所在，因为它没有发现您没有输入您的姓名或电子邮件地址。

Answer 1

至于问题 - 隐藏（当元素折叠时会发生这种情况）输入字段在验证过程中被忽略。为避免这种情况，您可以设置ignore 选项：

$("#ticketForm").validate({
    ignore: false,
    // ...

Demo with "ignore: false"

注意：对于上面的示例，您将无法将用户引导回无效的输入字段，因为它们实际上隐藏在 collapsed 部分中。但是，您可以使用 invalidHandler 回调“展开”该部分：

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');
    }
}

DEMO

---

就个人而言，我不会允许用户“继续”到另一个部分，直到当前部分被填写并有效。这使得提交过程更加清晰。

这样做（使用您的示例）：

1. 从每个“继续”按钮中删除data-toggle="collapse" 属性 并添加continue 类：

   <form id="ticketForm">
       <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
           ...
           <div class="panel">
               ...
               <div id="generalInfo" class="panel-collapse collapse in" role="tabpanel">
                   ...
                   <input type="text" name="email" id="email" class="form-control" />
                   <input type="text" name="name" id="name" class="form-control" />
                   ...
                   <a href="#" class="btn btn-success pull-right continue">Continue</a>
                   ...
               </div>
               ... another section ...
           </div>
       </div>
   </form>
   

2. 手动设置“继续”按钮点击事件：

   $('.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() 将为当前部分中的每个输入返回false，使用为表单设置的验证rules：

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

DEMO