目次
- はじめに：requiredを付けたら送信できない…それ正常です
- 結論：requiredは「ブラウザ内バリデーション」のスイッチ
- required属性とは？
- requiredが使える要素一覧
- 使用可能
- 使用不可
- requiredの正しい書き方
- requiredが効かない原因（超重要）
- 原因①：formタグで囲まれていない
- 原因②：disabledが付いている
- 原因③：JavaScriptで送信を止めている
- 原因④：novalidateが指定されている
- requiredの内部仕組み（なぜ止まる？）
- inputタイプ別の挙動の違い
- email + required
- checkbox + required
- radio + required
- requiredとCSSの連携
- requiredとエラーメッセージ問題
- DevToolsでの確認手順
- requiredは万能ではない
- 実務でのおすすめ設計
- アクセシビリティ配慮
- よくある検索意図への回答まとめ
- requiredが効かない
- requiredを解除したい
- requiredとJS併用できる？
- まとめ：requiredは強力だが補助機能
はじめに：requiredを付けたら送信できない…それ正常です
フォームを作っていて、
- requiredを付けたら送信できなくなった
- なぜかエラーが出る
- JSを入れたら効かなくなった
こんな経験ありませんか？
正直に言うと、私も最初は「壊れた？」と思いました。
でもそれ、壊れていません。
requiredは“送信を止める”ための属性です。
この記事では、
- requiredの正しい仕組み
- 使える要素
- 効かない原因
- ブラウザ依存の挙動
- JavaScriptと併用する場合の落とし穴
- アクセシビリティ・実務設計の考え方
まで、初心者〜中級者向けに網羅します。
結論：requiredは「ブラウザ内バリデーション」のスイッチ
required は、
その入力欄が空ならフォーム送信を止めるHTML属性です。
サーバーに送る前に、
ブラウザがチェックしてくれます。
required属性とは？
基本形はこちら。
<input type="text" name="name" required>未入力のまま送信すると、
- フォーム送信がブロックされる
- ブラウザ標準のエラーメッセージが表示される
これが「HTML5のバリデーション」です。
requiredが使える要素一覧
使用可能
- input（text / email / password / number / tel など）
- textarea
- select
- checkbox（※特殊な挙動あり）
- radio（グループ単位）
使用不可
- input type="hidden"
- input type="button"
- input type="submit"
requiredの正しい書き方
requiredは「論理属性」です。
<input required>これでOK。
以下も同じ意味です。
<input required="required">値は不要です。
requiredが効かない原因（超重要）
実務で多いトラブルを整理します。
原因①：formタグで囲まれていない
requiredは「送信時」に動きます。
<input type="text" required>これだけでは無意味。
必ずform内に。
<form>
<input type="text" required>
</form>原因②：disabledが付いている
<input type="text" required disabled>disabledは完全に無効化します。
requiredは無視されます。
原因③：JavaScriptで送信を止めている
event.preventDefault();これがあるとブラウザバリデーションが発火しないことがあります。
特にSPA系やカスタム送信処理では注意。
原因④：novalidateが指定されている
<form novalidate>これがあるとrequiredは動きません。
フレームワーク利用時に入っていることがあります。
DevToolsで確認しましょう。
requiredの内部仕組み（なぜ止まる？）
フォーム送信時、ブラウザは：
- 各required要素を確認
- 空欄があるか判定
- 問題があれば送信を停止
これはJavaScript不要のネイティブ機能です。
inputタイプ別の挙動の違い
email + required
<input type="email" required>- 空欄 → エラー
- 形式違い → エラー
requiredと型チェックは同時に動きます。
checkbox + required
<input type="checkbox" required>未チェック → 送信不可
利用規約チェックで使います。
radio + required
同じnameグループ内で1つ選択必須になります。
requiredとCSSの連携
required自体は制御できませんが、
スタイルは可能です。
input:required {
border-left: 4px solid red;
}未入力状態も検知できます。
input:invalid {
border-color: red;
}これ、実務ではよく使います。
requiredとエラーメッセージ問題
ブラウザ標準メッセージは：
- 変更不可（基本）
- デザイン不可
- 文言はブラウザ依存
カスタマイズするなら：
input.setCustomValidity("この項目は必須です");ただし多言語対応では慎重に。
DevToolsでの確認手順
効かないときは：
- formにnovalidateが無いか確認
- disabledになっていないか確認
- JSでpreventDefaultしていないか確認
- typeが正しいか確認
必ず原因はあります。
requiredは万能ではない
よくある誤解：
☑ requiredだけで完全防御できる
☑ サーバー側チェック不要
☑ JSと完全互換
全部違います。
requiredは「クライアント側の第一防衛ライン」。
最終防衛はサーバー側バリデーションです。
実務でのおすすめ設計
<label for="email">メールアドレス <span>必須</span></label>
<input
type="email"
id="email"
name="email"
required>- labelで明示
- 視覚的必須表示
- requiredでブラウザ制御
- サーバー側でも再チェック
これが基本形です。
アクセシビリティ配慮
☑ 必須を文字で明示
☑ 色だけで判断させない
☑ エラー時に説明を表示
☑ aria-requiredの併用も検討
フォームはUXの要。
よくある検索意図への回答まとめ
requiredが効かない
→ form / disabled / novalidate を確認
requiredを解除したい
→ 属性を削除
requiredとJS併用できる？
→ 可能。ただし送信制御順序に注意
まとめ：requiredは強力だが補助機能
requiredは、
- HTMLだけで必須入力制御できる
- 実装が簡単
- UX向上に直結
ただし、
- ブラウザ依存
- カスタマイズ制限あり
- サーバー側チェック必須
万能ではありません。
正しく理解して使えば、
フォーム品質は確実に上がります。
まずは小さなフォームで試してみてください。
動きを確認することが、
最短の理解ルートです。