Before submit form

Question

I need to use HTML5 inputs (type="email", etc.), but I need also show own error message, which I can style in 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> 

Does anyone know how to run a my own script before HTML5 validation? I can think of only onclick button event and after hit enter, but it's not ideal.

Answer 1

如果要进行自己的验证，请在表单中添加novalidate属性，以防止浏览器完成html5内部验证

<form id="myForm" novalidate>

Answer 2

尝试使用各种JS事件： onChange ， onKeyDown等。