6

jQuery UIタブがあり、最初のタブに1つの必須フィールドがあるページがあります。検証は機能し、ユーザーが値を入力していない場合は、フィールドの横に検証メッセージが表示されます。ただし、ユーザーが最初のタブを表示していない場合、フィールドが無効であることは明らかではありません。

この場合、最初のタブを表示したいのですが、「無効な」イベントのコールバックを登録する方法がわかりません。

また、タブの上に検証の概要を表示することも検討しました。これは、ユーザーが使用しているタブに関係なく表示されますが、ユーザーをフィールドに移動することをお勧めします。

jquery.validate.unobtrusive.jsファイルを調べてみましたが、jquery.validate.jsが拡張されているようです。jquery.validateのドキュメントを見ると、 validateメソッドinvalidHandlerに渡すことができるオプションがあることがわかりますが、そのメソッドはjquery.validation.unobtrusiveによって呼び出されるため、これを使用する方法がわかりません。

ここで少し迷っていますので、助けていただければ幸いです。

編集

答えはわかりませんでしたが、回避策を考え出しました。これを以下に投稿しました。それでも、誰かがこれを行うためのより良い方法で答えることを願っています。

4

5 に答える 5

2

ここから取得したこのコードは、あなたが望むことを行います:

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").submit(function () {
            $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id);
        });
    });
</script>

エラーのある最初のタブに移動します。私が開発しているプロジェクトでうまく機能しています...

于 2012-03-04T15:46:53.887 に答える
1

フォームを手動で検証して送信することになりました。

$("#save-button").button().click(function() {
    if (!$("#profile-form").valid()) {
        if ($("#tabs").tabs("option", "selected") > 0) {
            $("#tabs").tabs("option", "selected", 0);
        }
        return false;
    }
    $("#profile-form").submit();
});
于 2011-03-08T22:59:10.960 に答える
1

Unobtrusive に新しいアダプターを追加してみてください。

JQuery UI の代わりに Telerik を使用してタブを作成したため、マークアップが異なって見えます。Validator を通過した後のマークアップは次のようになります (つまり、Unobtrusive スクリプトによって検証エラーが挿入されます)。

<div id="rItemTabs">

   <ul>
        <li><a href="#rItemTabs-1">Tab 1</a></li>
        <li><a href="#rItemTabs-2">Tab 2</a></li>
   </ul>
   <!-- End Tab Nav-->

   <!-- Begin Tab Contents -->
   <div id="rItemTabs-1">
       <div class="editor-label">
           <label for="Title">Title</label>
       </div>
       <div class="editor-field">
           <input id="Title" class="input-validation-error name="Title">
           <span class="field-validation-error">*</span>
       </div>
   </div> 

   <div id="rItemTabs-2">
       <div class="editor-label">
           <label for="Title">Title</label>
       </div>
       <div class="editor-field">
           <input id="Title" class="input-validation-error name="Title">
           <span class="field-validation-error">*</span>
       </div>
   </div>

</div>

このスクリプトの目的は、「Tab Contents」の各 div を調べて、「field-validation-error」クラス (エラーが発生した場合にのみ存在するはずです) を探し、このクラスが見つかった場合は色を変更することです。関連するタブ ナビゲーション アイテム (つまり、タブ コンテンツの ID は、タブ ナビゲーション アイテムの href と同じです)。

$.validator.unobtrusive.adapters.add(
  'tab-validation',
   function () {
       var tabs = $('#rItemTabs [id*=rItemTabs]'); 
       $(tabs).each(function () {
       if ($(this).has('.field-validation-error').length) {
           var tabId = '#' + $(this).attr('id');
           $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' });
       }
   });
} (jQuery));

これが理にかなっていて、あなたにとってうまくいくことを願っています。

于 2011-10-19T21:31:25.767 に答える
0

errorPlacement（）関数を検索することをお勧めします

于 2011-03-08T00:01:12.810 に答える