フォームのバリデーションの実装

HTML5には標準のバリデーション機能がついているが、それをそのまま利用はしたくない

HTML5の標準バリデーション機能を活用しつつエラー表示の見た目だけ変える

エラーの表示タイミングは入力欄からフォーカスが外れた時と送信時

標準のエラー表示を機能させないようにする

form要素にnovalidateを付与することで検証機能を止めることができる

code:html

標準のエラー検証の利用

novalidateで検証を機能が止められるが、checkValidity()とvalidationMessageでエラーの表示をさせずにエラーの検証のみ行える

checkValidity()：エラーの有無を検証できる

validationMessage：エラーメッセージ

なお、TypescriptでcheckValidity()やvalidationMessageを使用するとプロパティ 'checkValidity' は型 'Element' に存在しません。というようなエラーが出てしまう。

code:typescript

const inputEl = document.querySelector("input")!;

console.log(inputEl.checkValidity()); // プロパティ 'checkValidity' は型 'Element' に存在しません。

console.log(inputEl.validationMessage); // プロパティ 'validationMessage' は型 'Element' に存在しません。

要素を取得時に型を明確に指定することでエラーは出なくなる

code:typescript

const inputEl = <HTMLInputElement>document.querySelector("input")!;

参考：