jquery - すべてのフィールドが入力されていない場合、タブでフィールドセットに移動し、展開し、クラスを変更するにはどうすればよいですか？

Question

フォームが動的に作成されるシステムがあり、100以上の質問が含まれている場合があります。これらの各質問には、約3つの異なる子の質問/回答用のフィールドが含まれています。子の質問はdivでラップされます。.dfcolumnsこれはページの読み込み時に折りたたまれ、質問/凡例がクリックされたときにjqueryトグルを使用して展開します。

ここでさらに2つのことを達成する必要があります。

1. 次のフィールドセットにタブで移動し、開きます。（アコーディオンのように、一度に1つだけ開いていると素晴らしいでしょう）

2. すべての子フィールドが入力されている場合は、フィールドセット/凡例のクラスを変更します（送信を押すときではなく、プロセス中にこれを実行するため、ここでは基本的なフォーム検証を探していません）。

基本的に、ユーザーエクスペリエンスを向上させるために、ユーザーが質問をタブで移動し、途中でどの質問を完了したかを知ることができるようにしたいと思います。

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");
    });
});

これらの他の2つの目標のいずれかも可能ですか？もしそうなら、私がそれについてどうやって行くかについてのアイデアはありますか？

ご入力ありがとうございます！