Jquery验证不适用于折叠的引导程序面板 [英] Jquery validation not working on collapsed bootstrap panels

问题描述

好的，对于我的HTML，我有这个bootstrap崩溃和其中的一些表单字段。

Okay so for my HTML I have this bootstrap collapse and some form fields inside of it.

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

然后我将表单提交给jquery验证。如果我打开上面的所有面板，验证将起作用。如果我按照它应该这样做并且只打开最后一个面板，其中只有提交按钮，则验证运行就像它没有问题。它没有看到折叠面板中的字段？

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?

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

I have not been able to find any answers on this and hoping the community can help me.

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

根据要求，我创建了一个JS小提琴

As per requested I have created a 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!

现在，如果您在HTML中滚动到第90行，并在中删除​​单词以下div：

Now, if you scroll to line 90 in the HTML and remove the word in on the class name of the following div:

< div id =priorityInfoclass =panel =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.

推荐答案

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

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 ignore option:

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

演示忽略：错误

注意：使用上面的示例，您将无法将用户定向回无效的输入字段，因为它们实际上隐藏在折叠部分中。但是，您可以取消折叠该部分，使用 invalidHandler 回调：

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 collapsed section. You can however "uncollapse" that section, using invalidHandler callback:

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

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

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

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

1. Remove data-toggle="collapse" attribute from each "continue" button and add continue class:

<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（） 将使用验证<$ c为当前部分中的每个输入返回 true / false $ c>规则为表单设置：

$(this).valid() will return true/false for each input in current section, using validation rules set for the form:

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

DEMO

DEMO

这篇关于Jquery验证不适用于折叠的引导程序面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！