HTML
required属性が効かない（フォームバリデーション）
送信のしかたがバリデーションを通っていない
こんな症状
required属性を付けたのに空欄のまま送信できてしまう。HTMLのバリデーションは「submitによる送信」のときだけ発動する、というのがポイントだよ。
まず試す
送信ボタンを type=submit にする。JSから送るなら form.submit() ではなく form.requestSubmit() を使う。
html
<form id="f">
<input name="email" required>
<button type="submit">送信</button>
</form>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓type=button ＋ form.submit() で送っている
→ form.submit() はバリデーションをスキップする。type=submit にするか requestSubmit() を使う。 - ✓input が form の外にある
→ input を form の中に入れる。 - ✓form に novalidate が付いている
→ novalidate 属性を外す。
なぜ起きる？
ブラウザのバリデーション（required・pattern・type="email"など）は、<form>がsubmitで送信されるときにだけ発動するよ。効かない原因は4つ。(1) inputが<form>タグの外にある。 (2) ボタンが type="button" になっていて、JavaScriptで form.submit() を呼んでいる——form.submit() はバリデーションを完全にスキップするんだ。 (3) formタグに novalidate 属性が付いている。 (4) JSのsubmitイベントで preventDefault() してから独自送信している。
✕ エラーが起きるコード
<form id="f">
<input name="email" required>
<button type="button" onclick="document.getElementById('f').submit()">送信</button>
</form>
<!-- form.submit() はバリデーションをスキップして送信してしまう -->✓ 直したコード
<form id="f">
<input name="email" required>
<button type="submit">送信</button>
</form>
<!-- JSから送る場合は requestSubmit() を使う -->
<script>
// document.getElementById("f").requestSubmit();
</script>✅ 直ったか確認
空欄のまま送信ボタンを押して、ブラウザの「このフィールドを入力してください」が出ればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
- formが送信されない — action属性やmethod属性が未設定
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- buttonクリックでページがリロードされる — form内のbuttonがデフォルトでsubmitになる
- loading="lazy"が効かない — ファーストビューの画像に指定している
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説