デフォルトのHTML5フォーム検証でIEブラウザでエラーメッセージが表示されない

Question

IEブラウザでは、デフォルトのhtml5検証メッセージを表示する方法が異なります。フォームを送信した後、ChromeまたはFirefoxがエラーメッセージとともにかなりのバブル/ツールチップを表示します。 IEは無効なフィールドに下線を引いていますが、ユーザーのホバーフィールドのみが表示されています。

質問： Chromeのようなメッセージを表示する方法を変更する簡単な方法はありますか？これはいくつかの疑似クラスや何かに基づいていますか？あなたに似た問題がありましたか？

Answer 1

oninvalidイベントを使用できます。

document.getElementById('input').oninvalid = function(e) { 
    e.preventDefault(); //prevent default tooltip 
    this.style.background = '#f2dede'; //whatever 
    var elem = this.parentNode.getElementsByClassName('tooltiptext')[0]; //select tooltip element 

    //show the tooltip 
    elem.style.visibility = "visible"; 
    elem.style.opacity = "1"; 
} 

私はこのフィドルhttps://jsfiddle.net/petekeeports/0yxfj3Lr/、それはあなたが探しているものであるかどうかを確認をしました。お役に立てれば！！