3

3 つのタブに分割されたフォームがあり、jQuery 検証プラグインで検証します。ユーザーはリンク付きのタブを切り替えることができます。送信ボタンが押されて検証が失敗した後、対応するタブ/コンテナーにエラーがあるリンクにエラー クラスが追加されます。これは次の関数で作成されました：

function treatFormLinks () {
    $('.formTab').each(function(){
        $("#" + this.id + "Link").toggleClass('hasErrors', !$('input, select, textarea', this).valid());
    });     
};
$("#Submit").click(function () {
    $('.FormNavi a').removeClass('hasErrors');
    treatFormLinks();
});

これがどのように機能するかを説明するための html の例です。

<a href="#" id="OneLink">Link 1</a>
<a href="#" id="OneLink">Link 2</a>
<a href="#" id="OneLink">Link 3</a>

<form>
    <div class="formTab" id="One">... form fields ...</div>
    <div class="formTab" id="Two">... form fields ...</div>
    <div class="formTab" id="Three">... form fields ...</div>
</form>

必要なのは、無効なフィールドを含む最初のdivを見つけて、これを表示することです。divのフィールドが有効で、divが表示されている#Oneとしましょう。私が欲しいのは、送信ボタンを押した後に表示することです。#Three#Three#Two

ありがとうございました！

4

2 に答える 2

1

リンクを設定した直後に div を表示します。

function treatFormLinks () {
    var alreadydisplayed = false;
    $('.formTab').each(function(){
        $("#" + this.id + "Link").toggleClass('hasErrors', !$('input, select, textarea', this).valid());
        alreadydisplayed?void(0):$(this).css("display","");//if an invalid tab has already been displayed, do nothing
        alreadydisplayed = true;
    });     
}
于 2012-11-09T08:46:50.353 に答える
0

次の関数を拡張しました：

$("#" + this.id).toggleClass('tabHasErrors', !$('input, select, textarea', this).valid());
$(".formTab").hide();
$(".formTab.tabHasErrors:first").show();

あまりにもエレガントではありませんが、機能します。

于 2012-11-09T09:23:53.513 に答える