Question

HTML5入力（type = "email"など）を使用する必要がありますが、私はCSSでスタイルを設定できる独自のエラーメッセージも表示する必要があります。

document.getElementById('myForm').onsubmit = function() { 
 
    document.getElementById('message').innerHTML = '<div>Email must be valid.</div>'; 
 
    return false; 
 
}

#message > div { 
 
    font-family: Open Sans, Arial; 
 
    font-size: 200%; 
 
    position: absolute; 
 
    left: 50%; 
 
    letter-spacing: 0.05em; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<form id="myForm"> 
 
    <input type="email" required /> 
 
    <button>Send</button> 
 
</form> 
 

 
<div id="message"></div>

誰もがHTML5の検証の前に自分のスクリプトを実行する方法を知っていますか？私はonclickのボタンイベントとヒットした後だけを考えることができますが、それは理想的ではありません。

Answer 1

独自の検証を行いたい場合は防ぐために形成することnovalidate属性を追加するHTML5ブラウザ

<form id="myForm" novalidate> 

Answer 2

様々なJSイベント使用してみてください：onChangeを、onKeyDownなど