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

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

这样做（使用你的例子）：

从每个“继续”按钮中删除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,
        },
        // ...
    },
    // ...
});

<强> DEMO

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

1 个答案: