バリデーション（入力チェック）の実装

このページの目的

ユーザーがフォームに入力した値が、私たちが意図した形式（例：必須項目、メールアドレスの形式など）になっているかをチェックする「バリデーション」機能の実装方法を学びます。
サーバーにデータを送る前の、ブラウザの段階でミスを検知することで、ユーザーの入力間違いを減らし、使いやすいフォームを作成することを目指します。

checklistやることリスト

• required 属性で、必須入力項目を指定する
• type 属性（email, url, numberなど）を正しく使い、ブラウザの自動チェック機能を活用する
• minlength / maxlength 属性で、文字数の制限を設ける
• pattern 属性と正規表現を使い、より複雑な入力パターン（例：電話番号）をチェックする
• CSSの擬似クラス（:valid, :invalid）で、入力値が正しいかどうかに応じてスタイルを変更する

---

build実装方法：HTMLの属性を使う

JavaScriptを使わなくても、HTMLの入力欄に特定の属性を追加するだけで、ブラウザが自動で入力チェックを行ってくれます。

1. 必須項目にする（required）

この属性を追加するだけで、入力が空のまま送信しようとすると、ブラウザがエラーメッセージを表示してくれます。

<label for="name">お名前 (必須)</label>
<input type="text" id="name" name="user_name" required>

2. 文字数の制限（minlength / maxlength）

入力できる文字の最小数と最大数を制限します。

<label for="username">ユーザーID (4〜8文字)</label>
<input type="text" id="username" name="user_id" minlength="4" maxlength="8" required>

3. 入力パターンの制限（pattern）

正規表現を使って、より複雑な入力パターンを指定できます。例えば、ハイフンなしの電話番号（数字10桁または11桁）をチェックする場合は以下のようになります。

<label for="tel">電話番号（ハイフンなし）</label>
<input type="tel" id="tel" name="user_tel" pattern="\d{10,11}" title="市外局番からハイフンなしで入力してください">

※title属性に指定したテキストが、エラー時のメッセージとして表示されます。

---

paletteCSSでバリデーションの状態を可視化する

CSSの擬似クラスを使うと、入力値が有効か無効かに応じて、入力欄のスタイルをリアルタイムで変更できます。

/* 入力が有効な（バリデーションを通過した）時のスタイル */
input:valid {
  border-color: #2ECC71; /* 緑色の枠線 */
}

/* 入力が無効な（バリデーションに失敗した）時のスタイル */
input:invalid {
  border-color: #E74C3C; /* 赤色の枠線 */
}

/* 必須項目で、かつ未入力の時だけエラー表示にしないための工夫 */
input:placeholder-shown {
   border-color: #D1D5DB;
}
input:placeholder-shown:invalid {
   border-color: #D1D5DB;
}

ポイント：:placeholder-shownを組み合わせることで、ユーザーがまだ何も入力していない状態では、エラー表示（赤い枠線）が出ないように制御できます。

---

---