HTML5になって進化しきった訳でも、進化しなくなる訳でもありません。新しい仕様がさらに進められています。それらはHTML5.1として策定されています。
今回はそのHTML5.1の中の入力チェック機能、HTMLInputElement.reportValidityについて紹介します。
HTMLInputElement.reportValidityとは？
仕様はHTMLFormElement.reportValidity() – Web APIs | MDNにまとめられています。まだ実装されているブラウザはGoogle ChromeやFirefoxくらいになります。HTML5で新しく追加された入力属性を使って入力値の検証を行えるAPIになります。
主な入力チェック
よく使われるものとしては以下があります。
必須チェック
required 属性で指定します。
パターン
正規表現を使って入力パターンを指定します。この場合、title属性も使ってエラー時のメッセージを指定するのが良いようです。以下はごく簡単な電話番号チェック（国際電話には対応していません）です。
確認入力
メールアドレスやパスワードなど、確認入力を行う場合のチェックは以下のように実装します。まずHTMLにはメールアドレス入力欄が二つあったとします。
そして確認入力のメールアドレスに対する入力イベントを使って検証を行います。エラーになる場合は該当要素の setCustomValidity メソッドに対してメッセージを適用します。
入力チェック
入力チェックは任意のタイミング（フォーカスが外れた時、フォーム送信時など）で可能ですが、例えばフォーム送信時であれば次のように実装します。
elem.reportValidity() が true（エラーがない）場合はフォーム送信されます。エラーがあれば送信は行われず、処理が終了します。
イベント
エラーがあった場合には該当フォームの invalid イベントが呼ばれます。
実装デモをJSFiddleにアップしてあります。実際のコード、操作について確認してください。
まだ先進的なAPIだけに、EdgeやSafariでは実装されていません。とは言え、今後サポートするブラウザが増えてくれば利用できる場面が多そうなAPIです。