JavaScript

この記事では、入力欄の値がフォームのルールを満たしているかを確認するcheckValidity()メソッドの基本を説明します。

checkValidity() [method]

checkValidity() は、フォーム要素（例：<input>や<form>）が 現在の入力値でルール（必須入力や範囲指定など）を守っているかどうかをチェックするメソッド です。

例えば、required 属性があるのに空欄だったり、type="email" にメールアドレスではない文字列が入っていた場合、checkValidity() は false（無効） を返します。逆にすべての条件を満たしていれば true（有効） を返します。

主な特徴：

• 自動でエラーメッセージは表示せず、有効かどうかの判定結果だけ返す
• 入力チェックをして 自分で処理を分岐したいときに便利
• form要素に対して使うと、フォーム内の全ての入力欄をまとめてチェックできる

例：

<form id="myForm">
	<label for="email">メールアドレス</label>
	<input type="email" id="email" name="email" required>
	<button type="button" id="checkBtn">確認</button>
</form>

<script>
	document.getElementById('checkBtn').addEventListener('click', () => {
		const form = document.getElementById('myForm');
		if (form.checkValidity()) {
			alert('すべて正しく入力されています！');
		} else {
			alert('入力内容に誤りがあります。');
		}
	});
</script>

checkValidity() は判定だけを行い、画面の説明文は自動で用意しません。実際の画面では、エラーの内容を入力欄の近くに表示し、色だけに頼らないようにしましょう。