HTML5からrequired属性が追加されている。使い方はカンタンで、<input>タグなどに属性を付与するだけ。
例） <input type="text" required> 又は <input type="text" required="required">
【余談】
今回、別のフォームからコピペして、required属性を付与して新しいフォームを作成したところ、このrequired属性が効かなかった。原因は元のフォームに「novalidate」属性がついていたこと。
他にも、下記の場合に効かないケースがある。Copilot先生の作ってくれたチェックリストを参考まで。
1. フォームが `<form>` タグで囲まれていない
- `required`はフォーム送信時にバリデーションされるため、`<form>`タグがないと機能しません。
- 対処：必ず`<form>`タグで囲み、`<input>`や`<select>`などをその中に配置。
2. `type="submit"` のボタンが使われていない
- JavaScriptで送信している場合、ブラウザのネイティブバリデーションがスキップされることがあります。
- 対処：`<button type="submit">`を使うか、JS送信前に`form.checkValidity()`で手動バリデーション。
3. `novalidate`属性がフォームに付いている
- これがあると、すべてのHTML5バリデーションが無効になります。
- 対処：`<form novalidate>`を削除。
4. JavaScriptで送信を強制している
- `form.submit()`を使うと、バリデーションをバイパスします。
- 対処：`form.submit()`ではなく、`form.requestSubmit()`や`form.checkValidity()`を使う。
5. `input`タグの構文ミス
- `required`のスペルミスや閉じタグの不備など。
- 例：`<input requiredd>` → 効かない
- 対処：HTML構文を検証ツール（例：W3C Validator）でチェック。
6. `display: none` や `visibility: hidden` が使われている
- 非表示のフィールドにはバリデーションがかからないことがあります。
- 対処：必要なら`aria-hidden`や`hidden`属性の使い方を見直す。
7. ブラウザの互換性や拡張機能の干渉
- 古いブラウザや拡張機能がバリデーションを妨げることも。
- 対処：別ブラウザでテスト、拡張機能を無効化して確認。