JavaScript | HTML / CSS 連携：フォーム応用 － required

JavaScript JavaScript
スポンサーリンク

required は「ここは“絶対に空で送らせない”ためのスイッチ」

required は、 「この入力欄は必須です。空のままフォームを送信させないでください」 とブラウザに伝えるための属性です。

ユーザーが必須項目を空のまま送信しようとすると、 ブラウザが自動で「ここを入力してください」と止めてくれます。

メールアドレス パスワード 同意チェックボックス 予約日

みたいな「絶対に必要な情報」に対して、 required を付けることで、 “未入力のまま送信される事故”をかなり防げます。

required の基本形と「ブラウザがしてくれること」

text入力での基本例

<form>
  <p>お名前：</p>
  <input
    type="text"
    name="username"
    required
  >

  <button type="submit">送信</button>
</form>

ここでの動きはこうです。

  1. ユーザーが何も入力せずに「送信」を押す
  2. ブラウザが「このフィールドを入力してください」と警告する
  3. フォームは送信されない

つまり、 「空のまま送信させない」 という最低限のバリデーションを、ブラウザが自動でやってくれます。

email入力での例（形式チェックも効く）

<form>
  <p>メールアドレス：</p>
  <input
    type="email"
    name="email"
    required
  >

  <button type="submit">送信</button>
</form>

この場合、

  • 空のまま送信 → required が効いて止まる
  • 変な文字列（abc など） → type="email" の形式チェックで止まる

という二重のチェックが入ります。

required は「空かどうか」を見る。 入力形式のチェックは type や pattern が担当。 この役割分担を理解しておくと、バリデーション設計がスッキリします。

checkbox と required：「必ずチェックしてほしい」場面の定番

利用規約への同意チェック

<form>
  <p>利用規約に同意する：</p>

  <input
    type="checkbox"
    id="agree"
    name="agree"
    value="yes"
    required
  >
  <label for="agree">同意します</label>

  <button type="submit">登録</button>
</form>

ここでの動きは、

  • チェックが OFF のまま送信 → ブラウザが止める
  • チェックが ON → agree = "yes" が送られる

というものです。

「必ずチェックしてほしい 1 項目」には、 checkbox に required を付けるのが定番。 同意なしで登録される事故を防ぐための、超重要なパターンです。

radioボタンと required：「どれか1つは選んでほしい」グループ

プラン選択の例

<form>
  <p>プラン：</p>

  <input
    type="radio"
    id="plan-basic"
    name="plan"
    value="basic"
    required
  >
  <label for="plan-basic">ベーシック</label>

  <input
    type="radio"
    id="plan-standard"
    name="plan"
    value="standard"
  >
  <label for="plan-standard">スタンダード</label>

  <input
    type="radio"
    id="plan-premium"
    name="plan"
    value="premium"
  >
  <label for="plan-premium">プレミアム</label>

  <button type="submit">登録</button>
</form>

ここでのポイントは、

  • 同じ name="plan" のグループの中で
  • どれか 1 つに required を付けると
  • 「このグループのどれか 1 つは選ばれていないと送信できない」

という挙動になることです。

radio は「グループの中から 1 つだけ」。 required は「その 1 つを必ず選んでほしい」。 この組み合わせで、“選択必須のラジオグループ”を作れる。

select と required：「“選択してください”のまま送らせない」テクニック

ダミーの option と required の組み合わせ

<form>
  <p>プラン：</p>

  <select name="plan" required>
    <option value="" selected>プランを選択してください</option>
    <option value="basic">ベーシック</option>
    <option value="standard">スタンダード</option>
    <option value="premium">プレミアム</option>
  </select>

  <button type="submit">登録</button>
</form>

ここでの流れは、

  • 最初は value="" の「プランを選択してください」が選ばれている
  • required が付いているので、空の value のまま送信しようとするとブラウザが止める
  • ユーザーがどれかプランを選ぶと、初めて送信できる

というものです。

「選択してください」というダミー option ＋ required は、 select で“必ず何か選ばせる”ための鉄板パターン。 フォーム UX を一段上げるテクニックです。

JavaScript と required：ブラウザバリデーションを意識した設計

checkValidity() で「HTMLバリデーションに乗っかる」

HTML：

<form id="registerForm">
  <p>メールアドレス：</p>
  <input
    type="email"
    name="email"
    required
  >

  <p>パスワード：</p>
  <input
    type="password"
    name="password"
    required
  >

  <button type="submit">登録</button>
</form>

<p id="message"></p>

JavaScript：

const form = document.querySelector("#registerForm");
const message = document.querySelector("#message");

form.addEventListener("submit", (event) => {
  if (!form.checkValidity()) {
    // ブラウザ標準のバリデーションに引っかかっている
    event.preventDefault();
    message.textContent = "入力内容を確認してください。";
  } else {
    message.textContent = "送信中...";
    // ここで独自処理（fetch など）を書くこともできる
  }
});
JavaScript

ここでのポイントは、

  • required や type="email" などの HTMLバリデーションを form.checkValidity() でまとめて確認できる
  • 自分で全部チェックしなくても、ブラウザの仕組みに乗っかれる

ということです。

required は「ブラウザのバリデーションエンジン」の一部。 JavaScript側でそれを尊重して設計すると、 無駄な二重チェックを減らせる。

required の限界：「中身の意味まではチェックしてくれない」

「空かどうか」以上のことは見てくれない

例えば、こういう入力欄があるとします。

<input
  type="text"
  name="username"
  required
>

required が見ているのは、

  • 空かどうか（文字が 1 文字以上あるか）

だけです。

「3文字以上でなければいけない」 「英数字だけでなければいけない」

といった条件は、 required だけでは表現できません。

そういうときは、

  • pattern 属性（正規表現）
  • JavaScript
  • サーバー側のバリデーション

を組み合わせる必要があります。

required は「必須かどうか」を決めるスイッチ。 “中身の意味”までは見てくれない。 だからこそ、他のバリデーションと組み合わせて使う前提で考える。

required を使うか迷ったときの判断基準

「この項目は“空でもいい”か、“絶対に必要”か？」

自分にこう聞いてみてください。

この入力欄は、

  • ユーザーが空のまま送っても問題ないか？
  • それとも、空だとアプリが成立しないか？

空でもいい → required は付けない 絶対必要 → required を付ける

例えば、

  • メールアドレス（ログイン用） → 必須
  • ニックネーム（任意） → 必須ではない
  • プロフィール画像 → 任意のことも多い
  • 利用規約への同意 → 必須

こういう判断を、 1 項目ずつちゃんと考えていくのがフォーム設計です。

初心者として「required」で絶対に掴んでほしいこと

required は、 「この入力欄は必須です。空のままフォームを送信させないでください」という意思をブラウザに伝えるための属性 です。

  • text・email・password・date などに付けると「未入力で送信不可」になる
  • checkbox に付けると「必ずチェックしてほしい 1 項目」になる
  • radioグループの 1 つに付けると「どれか 1 つは選んでほしい」になる
  • select とダミー option を組み合わせると「“選択してください”のまま送らせない」UIが作れる
  • required は「空かどうか」だけを見る。中身の意味は別のバリデーションで見る

あなたが required を付けるときに、 「この項目は“空でもいいのか、絶対に必要なのか”。 必要ならブラウザにもちゃんとそれを伝えて、ユーザーのミスを一緒に防いでもらおう」 と考えられていたら、 もう required を“ただの必須マーク”ではなく、 “ユーザーとあなたのアプリを守るための、小さくて頼れるガード”として扱えている状態です。

スポンサーリンク
タイトルとURLをコピーしました