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

Question

好吧,对于我的HTML,我有这个bootstrap崩溃和它内部的一些表单字段.

<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小提琴

一旦您加载小提琴并尝试提交表单(向下滚动预览),您将看到您收到恼人的警报,它会告诉您表单缺少必填字段. 这应该发生!

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

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

并重新加载小提琴,然后通过面板并尝试再次提交,你会发现你没有得到任何恼人的警报或通知.除非您收到一条通知表明表单已提交.

这是问题,因为你没有把你的姓名或电子邮件地址放进去.

Answer 1

至于问题 - 隐藏(这是元素折叠时发生的情况)输入字段在验证过程中被忽略.为避免这种情况,您可以设置ignore选项:

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

使用" 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()将返回true/ false为当前部分中的每个输入,使用rules表单的验证集:

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

DEMO