Google chrome jQueryタブを使用して「無効なフォームコントロールにフォーカスがない」

Question

jQueryを使用して多くの「タブ」に分割されたフォームを作成しました。さまざまなタブに表示されるフィールドがあります。

フォームのすべてのフィールドのいくつかが必要とされ、所定の位置に彼らの小切手を持っている、いくつかの最小値を持っている必要がありますが、その他

しかし、私はそれらの場合、フィールドに無効な値でフォームを送信しようとすると、フィールドが現在と異なるのタブの下に、私はGoogleのクロムからコンソールにエラーを取得している：

無効なフォームコントロールは

フォーカス可能ではありませんが、ユーザーは何の効果も見ない、またすることができますの/彼は間違ったフィールドを見つけるsiそれはブラウザによって強調表示されていません。彼らはすべて（フィールドに正しい名前を与えることを言う、しかし

• An invalid form control with name='' is not focusable
• "Invalid form control" only in Google Chrome
• An invalid form control with name='' is not focusable. WITHOUT ANY REQUIRED OR HIDDEN INPUTS

：

は、私はすでに、次の質問に対する回答を読んだことがあります既に完了している）、または「必須属性」を削除する（それを行うことはできません。理由があります）。

私はサーバー側の検証も行っていることを強調したいと思います。したがって、これはこの質問のトピックではありません。

エラーを回避しながら、HTML5検証をフォームに保存するにはどうすればよいですか？

EDIT：あなたはすぐにフォームをGoogle Chromeでそれをロードし、提出する場合には、実際のフォームよりはるかに簡単であるにも関わらず、私が説明しています何の例を見つけることができます

Here

、あなた」あなたのコンソールにエラーが表示されます。

<form id="form_tabs" name="form_tabs" method="post" action=""> 
    <div id="tabs" class="ui-tabs"> 
    <ul> 
     <li><a rel="tabs" href="#tab1">FIRST TAB</a></li> 
     <li><a rel="tabs" href="#tab2">SECOND TAB</a></li> 
    </ul> 

    <div id="tab1" class="ui-tabs-hide"> 
     <input type="text" name="text1" id="text1" value="" placeholder="I am NOT required"/> 
    </div> 

    <div id="tab2" class="ui-tabs-hide"> 
     <input type="text" name="text2" id="text2" value="" placeholder="I REALLY am required!" required="required"/> 
    </div> 
    </div> 

    <br/> 
    <button type="submit" value="submit"> 
    SEND FORM 
    </button> 
</form> 

Answer 1

を示しています

$("form input").on("invalid", function() { 
    $(this).parents('.parentdiv').find('.div').show() 
}); 

でそれを解決しました：

//when submitted if there was an issue 
$("form input").on("invalid", function() { 
     //find tab id   
     var element = $(this).closest('.ui-tabs-panel').index(); 
     //goto tab id 
     $('#yourTabs').tabs('option', 'active', element) 
}); 

Answer 2

ブラウザでは、無効な制御でタブを表示する方法がわかりません。したがって、手動で処理する必要があります。

document.querySelector('#form_tabs').addEventListener('invalid', function(event) { 
    // Check event.target, and show its owner tab. e.g. 
    event.target.parentNode.classList.remove('ui-tabs-hide'); 
}, true); 

Answer 3

私は同じ問題を抱えていたし、これは無効なデータとDIVをポップアップし、これがVilrianaから少しのような答えを動作するように表示されるメッセージ