如果未填充所有字段，如何选择字段集、展开以及更改类？

Posted 2023-02-16

【中文标题】如果未填充所有字段，如何选择字段集、展开以及更改类？

【英文标题】：How to tab to fieldset, expand, and also change class if not all fields are populated?

【发布时间】：2012-10-19 01:18:01

【问题描述】：

我有一个动态构建表单的系统，其中一些可能包含 100 多个问题。这些问题中的每一个都包含大约 3 个不同的子问题/回答字段。子问题包含在一个 div 中：.dfcolumns 在页面加载时折叠，然后我使用 jquery 切换在单击问题/图例时展开它们。

我还需要在这里完成两件事：

Tab 到下一个字段集并打开它。 （一次只打开一个会很棒，就像手风琴一样）

如果所有子字段都已填充，则更改字段集/图例的类（我不是在这里寻找基本的表单验证，因为我希望在此过程中发生这种情况，而不是在点击提交时）。

基本上为了更好的用户体验，我想让他的用户能够浏览问题，并知道他们在此过程中完成了哪些问题。

html：

<div class="dform">
<div class="dform_element">
    <div class="dform_container">
        <fieldset>
        <legend>1. Question/Toggle Trigger</legend>
            <div class="dfcolumns">
                *a bunch of field types here…
            </div>
        </fieldset>
    </div>
</div>
<div class="dform_element">
    <div class="dform_container">
        <fieldset>
        <legend>2. Question/Toggle Trigger</legend>
            <div class="dfcolumns">
            <div class="dfcolumns">
                *a bunch of field types here…
            </div>
        </fieldset>
    </div>
</div>

CSS： .dfcolumns display: none;

切换功能：

    $(function()
    $("legend").click(function()
            $(this).parent().find(".dfcolumns").slideToggle("slow");
    );
);

这两个目标中的任何一个都可能实现吗？如果是这样，我有什么想法吗？

非常感谢您的任何意见！

【问题讨论】：

一切皆有可能，但您可能需要考虑查看表单向导插件。可见形式的选项卡将转到下一个字段，但如果字段被隐藏，它将被绕过，因此必须编写代码来处理它。您很可能会找到一个插件，它具有您需要的许多功能，而所需的手动编码却少了很多

【参考方案1】：

我使用 jquery 提供了简单的解决方案：

<ul class="nav nav-tabs"></ul>

<form class="fieldset-tabs">
    <fieldset>
        <legend>Tab 1</legend>
        **Tab 1 Cont**
    </fieldset>
    <fieldset>
        <legend>Tab 2</legend>
        **Tab Cont 2**
    </fieldset>
</div>

而 javascript 是：

jquery(function()
        $('.fieldset-tabs fieldset').each(function (index) 
            var text = $(this).addClass('tab tab-'+index).find('legend').text() ;
            $('.nav.nav-tabs').append('<li><a href="#" data-toggle=".tab-'+index+'">'+text+'</a></li>') ;
        );
        $('.nav.nav-tabs li a').click(function (e) 
            e.preventDefault() ;
            var $a = $(this);
            var $li =  $a.parent().addClass('active');
            $('.nav.nav-tabs li').not($li).removeClass('active');
            $('.fieldset-tabs fieldset.tab').not($a.data('toggle')).hide();
            $($a.data('toggle')).show();
        ).eq(0).trigger('click') ;
    );