HTML
📄 required属性が効かない
フォームの必須チェックが動かない
😰 こんな症状
inputにrequiredを付けたのに空でも送信できてしまう。フォームの必須チェックが効かないときに起きるよ。
🔍 原因
formタグにnovalidate属性が付いているとブラウザのバリデーションが全て無効になるよ。また、JavaScriptでformをsubmitしている場合もブラウザのバリデーションが発動しないんだ。
❌ エラーが起きるコード
<form novalidate><input required></form>
<!-- novalidate で無効 -->✅ 直し方
1. formタグにnovalidate属性が付いていないか確認し、あれば削除する。 2. JSでsubmitする場合はform.checkValidity()を呼んでバリデーションを手動実行する。 3. reportValidity()を使うとエラーメッセージも表示されるよ。
✅ 修正後のコード
<form><input required><button type="submit">送信</button></form>この解決法は役立ちましたか？
🔗 関連するエラー
- フォームバリデーションが効かない — formタグの外にinputがある
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- loading="lazy"が効かない — ファーストビューの画像に指定している
- 画像が遅延読み込みされない — loading="lazy" が効いていない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説