2

jQuery UI タブを使用する ASP.NET Web フォーム ページがあります。各タブ内には、タブ内で入力を送信するボタンを含む一連の入力があります (AJAX 呼び出しを使用しますが、この説明には関係ありません)。

jquery 検証エンジン ( https://github.com/posabsolute/jQuery-Validation-Engine ) を、タブのコンテンツを構成する入力のサブセットのみにアタッチしたいのですが、ASP.NET Web フォームの動作方法のために、フォーム要素は 1 つだけで、検証エンジンはフォームにアタッチする必要があります。

現在表示されているタブ/要素を検証呼び出しに含めるようにこの検証エンジンに指示する簡単な方法はありますか?

4

2 に答える 2

2

応答を編集します。

あなたが探しているものはさらに簡単です!!! ユーザーが他のタブに移動することを制限せずに、ユーザーが現在いるタブのフィールドを単に検証したい場合は、提供したコードの beforeActivate 部分のタブを無視し、jQuery Validation Engine を初期化して非表示フィールドの検証を無視します。非アクティブなすべてのタブの状態です。コードは次のようになります。

jQuery("#myForm").validationEngine('attach', {
    promptPosition: "bottomLeft",
    validationEventTrigger: "submit",
    validateNonVisibleFields: false // this does the trick!
});

例を説明する新しい JSFiddle は次のとおりです: http://jsfiddle.net/T7daH/

乾杯！:-)

-------------------------------------------------- ----- 元の回答 ------------------------------------------- ----------

フィールドやタブのクリックごとにプログラムで検証をトリガーすることなく、複数のタブにまたがるフォームで jQuery Validation Engine を実装する非常に簡単な方法が実際にあります。

複数のタブにまたがる次のフォームがある場合...

<form id="myForm" action="">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>

        </li>
        <li><a href="#tabs-2">Tab 2</a>

        </li>
        <li><a href="#tabs-3">Tab 3</a>

        </li>
    </ul>
    <div id="tabs-1">
        <input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
    </div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

次に、フォームとタブを次のように設定します。

jQuery("#myForm").validationEngine('attach', {
    promptPosition: "bottomLeft",
    validationEventTrigger: "submit",
    validateNonVisibleFields: true,
    updatePromptsPosition: true
});

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            if (!$("#myForm").validationEngine('validate')) {
                event.preventDefault();
                $('#myForm').validationEngine('hide');
                setTimeout(function () {
                    $("#myForm").validationEngine('validate');
                }, 450);
            }
        }
    });
});

その結果、ユーザーが現在使用しているタブが完全に有効でない場合、ユーザーは別のタブを選択できません。JSFiddle のデモは次のとおりです: http://jsfiddle.net/g9yLL/36/

乾杯！:-)

于 2014-02-11T16:37:18.493 に答える