JavaScript

A simple way to check if form inputs follow the rules defined in HTML using JavaScript.

validity

validityとは何か？

validityは、フォーム要素（例：<input>や<textarea>）がHTMLで設定されたルールに沿って正しい値が入力されているかどうかをチェックできる仕組みです。

validityプロパティを使うと、その要素がルールを守っているか、どんなエラーがあるのかを簡単に知ることができます。

例えば、以下のようなルールを設定できます：

• 入力が必須かどうか（required）
• 入力の最小・最大の長さ（minlength、maxlength）
• 入力値の数値範囲（min、max）
• 入力の書式がメールアドレスやURLとして正しいか（type="email"やtype="url"）

validityを使うと、「このフィールドに入力が足りない」「数字が範囲外」「形式が違う」といった状態をJavaScriptで簡単に判定できます。

簡単なコード例

<input type="email" id="emailInput" required>
<button onclick="checkEmail()">送信</button>
<p id="message"></p>

<script>
function checkEmail() {
	const input = document.getElementById('emailInput');
	const message = document.getElementById('message');

	if (input.validity.valid) {
		message.textContent = "入力は正しいです！";
	} else {
		message.textContent = "メールアドレスを正しい形式で入力してください。";
	}
}
</script>

ポイント：

• input.validity.valid は true または false を返します。
• input.validity には、valueMissing（必須なのに入力がない）、typeMismatch（形式が違う）など、複数の細かいエラーフラグもあります。