twitter-bootstrap Jquery 验证不适用于折叠的引导程序面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28284357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery validation not working on collapsed bootstrap panels
提问by moevans
Okay so for my HTML I have this bootstrap collapse and some form fields inside of it.
好的，对于我的 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>
With multiple panels and obviously the form fields where the ...are in the example above.
带有多个面板，显然...还有上面示例中的表单字段。
I then have the form submitting to the jquery validation. If I "open" all the panels above, the validation will work. If I do it like it is supposed to do and only have the last panel open which only has submit button in it, the validation runs like it has no problems. It doesn't see the fields in the collapsed panels?
然后我将表单提交给 jquery 验证。如果我“打开”上面的所有面板，验证将起作用。如果我按照它应该做的那样做，并且只打开最后一个面板，其中只有提交按钮，那么验证会像没有问题一样运行。它没有看到折叠面板中的字段？
I have not been able to find any answers on this and hoping the community can help me.
我一直无法找到任何答案，希望社区可以帮助我。
How do I run jquery validation when the bootstrap panels are collapsed?
当引导程序面板折叠时如何运行 jquery 验证？
As per requested I have created a JS Fiddle
根据要求，我创建了一个JS Fiddle
As soon as you load the fiddle and try to submit the form (scroll down preview) you will see you get annoying alerts and it tells you the form is missing required fields.This is supposed to happen!
只要您加载小提琴并尝试提交表单（向下滚动预览），您就会看到令人讨厌的警报，它告诉您表单缺少必填字段。这是应该发生的！
Now, if you scroll to line 90in the HTML and remove the word inon the class name of the following div:
现在，如果您滚动到line 90HTML 并删除in以下 div 的类名上的单词：
<div id="priorityInfo" class="panel-collapse collapse in" role="tabpanel">
<div id="priorityInfo" class="panel-collapse collapse in" role="tabpanel">
and re-load the fiddle and then go through the panels and try to submit again, you will notice you don't get any annoying alerts or notifications. Except you get one notification saying the form was submitted.
并重新加载小提琴，然后通过面板并再次尝试提交，您会注意到您没有收到任何烦人的警报或通知。除非您收到一份通知，说表格已提交。
This is the problem as it's not catching that you didn't put your name or email address in.
这是问题所在，因为您没有输入姓名或电子邮件地址并没有发现。
回答by Artur Filipiak
As for the question - hidden (and this is what happen when the element is collapsed) input fields are ignored in validation process. To avoid this, you can set ignoreoption:
至于问题 - 在验证过程中忽略隐藏（这是元素折叠时发生的情况）输入字段。为避免这种情况，您可以设置ignore选项：
$("#ticketForm").validate({
ignore: false,
// ...
Note: with the above example, you'll not be able to direct the user back to the invalid input fields as they're actually hidden inside collapsedsection. You can however "uncollapse" that section, using invalidHandlercallback:
注意：使用上面的示例，您将无法将用户引导回无效的输入字段，因为它们实际上隐藏在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');
}
}
Personally, I wouldn't allow the user to "continue"to another section until the current one is filled out and valid. This makes submission process much more clear.
就个人而言，在当前部分填写并有效之前，我不会允许用户“继续”到另一部分。这使得提交过程更加清晰。
To do so (using your example):
这样做（使用你的例子）：
Remove
data-toggle="collapse"attribute from each "continue"button and addcontinueclass:<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>Set "continue"buttons click event manually:
$('.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()will returntrue/falsefor each input in current section, using validationrulesset for the form:$("#ticketForm").validate({ // ... rules: { name: "required", email: { required: true, email: true, }, // ... }, // ... });
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>手动设置“继续”按钮单击事件：
$('.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, }, // ... }, // ... });
