3

セットアップ

  • 2 つのタブを持つ HTML ページ(Bootstrap Tabbable nav でビルド)
  • 2 つのタブの両方が1 つのフォーム タグで囲まれている
  • 現在アクティブなタブに関係なく、常に表示される送信ボタンが1 つあります。
  • タブ 1のみにフォーム フィールドが含まれます(フォーム フィールドには HTML5 の「必須」属性があります)。

状況

  • ユーザーはタブ番号 2 をアクティブにしています...
  • ...そして「送信」を起動します
  • タブ1にHTML5検証エラーがあるとしましょう

問題

  • HTML5 検証は表示されません(ユーザーがタブ 2 をアクティブにしていて、エラーがタブ 1 に表示されているため)
  • エラーを表示するには、ユーザーが手動でタブ 1 に切り替える必要があります。

質問

  • この状況でタブ番号 1 に自動的に切り替えるにはどうすればよいですか?
  • 簡単な解決策はありますか？(HTML5-Validation-Event を何らかの形で JavaScript に渡しているのでしょうか?)

誰かがここで私を助けてくれたら、とてもうれしいです。クリエイティブなアイデアは大歓迎です。事前にどうもありがとうございました。

4

1 に答える 1

0

私は問題全体について考え、これを思いつきました：

  • 検証エラーがスローされる場合は、タブ 1 にある必要があります。つまり、検証エラーはタブ 1 でのみ発生する可能性があります。
  • そこで、独自の送信関数を作成することにしました。

どのように解決したか（詳細）：

1.) 送信ボタンを「普通の」ボタンに「劣化」させた

2.) 「submitTabs()」関数を起動する onclick イベントをそのボタンに追加しました。

3.) カスタム機能

function submitTabs()
{
    // always get tab 1 to front
    $('a[href=#tab_with_fields]').tab('show');

    // submit form manually
    $('form:first').submit();
}

これで、フォームを送信するたびに、タブ 1 がアクティブになり、表示されます。HTML5-Validation エラーがある場合は表示されます。エラーがなければ、タブが 1 ～ 2 秒間アクティブになり、フォームが送信されて別のページにリダイレクトされます。

于 2013-08-17T23:40:13.297 に答える