HTMLのrequired属性でフォームの必須入力を強制し、未入力のままの送信を防ぐ方法

ユーザーが必須フィールドを未入力のままフォームを送信してしまうのを防ぎたい場合は、送信時に入力が必須となる input 要素に required 属性を追加するだけで実現できます。特別なJavaScriptを書く必要はなく、HTMLだけで完結するシンプルな方法です。

記述例

<form id="form">
  <input type="text" name="full-name" placeholder="Full name" required />
  <input type="text" name="email" placeholder="Email" required />
  <input type="text" name="phone-number" placeholder="Phone number" />
  <button id="button-submit-form" type="submit">
    Submit Form
  </button>
</form>

コードの解説

上記のコードでは、氏名（Full name）とメールアドレス（Email）の2つの入力欄に required 属性が設定されています。一方、電話番号（Phone number）の入力欄には属性がないため、任意項目として扱われ、空欄のままでも送信が可能です。

実際の動作

この状態で、ユーザーが必須フィールドを埋めずに「Submit Form」ボタンをクリックすると、フォームは送信されず、次のような警告ポップアップが表示されます。

補足ポイント

required 属性による入力チェックは、Chrome、Firefox、Safari、Edgeなど、すべてのモダンブラウザで標準サポートされています。また、type="email" を指定すればメールアドレス形式の妥当性チェックも同時に行えるため、用途に応じて入力タイプの指定も組み合わせると、より堅牢なフォームになります。