fix(v1.0): form バリデーションを browser native に統一（novalidate 削除、custom error 要素削除）#124
Merged
Merged
Conversation
…r 要素削除）
- <form novalidate> → <form>（novalidate 属性を削除）
- L629 の JS 前提コメント（aria-describedby / hidden / aria-invalid 切替案内）を削除
- <p class="c-form__error" role="alert" hidden> × 7 を全削除
- aria-describedby="xxx-error" × 7 を全削除
- .c-form__error { font-size / color-error } CSS ルールを削除
- HTML5 native バリデーション（required / type="email" / type="tel"）は保持
starter ではカスタムバリデーションを実装しない方針（しゅんえい判断、2026-04-23）。
シンプル志向 + 教材性優先。実案件でカスタム UX が必要な場合はユーザーが個別実装。
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Deploying starter with
|
| Latest commit: |
41204df
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c61f6fcf.starter-20t.pages.dev |
| Branch Preview URL: | https://fix-v1-0-form-browser-valida.starter-20t.pages.dev |
5 tasks
shunei-web
added a commit
that referenced
this pull request
Apr 23, 2026
しゅんえい指摘（2026-04-23）の 404 対応漏れ修正、README の古い記述更新、 AR v1.0 リリース後扱いだった採用項目を繰り上げて同 PR で対応（8 件）。 - 404.html: CUSTOMIZE コメントを「カスタマイズして使う」方針に統一（#1） - 404.html: head 順序を PR #145 と同じ Google Web Fundamentals 順に整列（#2） - README: novalidate 削除（PR #124 実装との整合）（#3） - README: 404.html 説明を「削除推奨」→「カスタマイズして使う」（#4） - README: 「## 設計判断の詳細」セクション追加（spec 無料 + 書籍）（#5） - 404.html: heading を <hgroup> + __eyebrow + __title に統一（採用 20）（#6） - 全 3 HTML: theme-color に media 属性付きで light / dark 両対応（採用 17）（#7） - index.html: "min" に lang="en" 付与 WCAG 3.1.2（採用 19）（#8） Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
6 tasks
This was referenced Apr 30, 2026
shunei-web
added a commit
that referenced
this pull request
Apr 30, 2026
- 全 7 フィールドに aria-describedby + role="alert" エラー要素配置 - form に novalidate 追加（JS 完全制御のため、ブラウザ tooltip を抑制） - c-form__error CSS スタイル復活（font-size + color） - main.js に initFormValidation() 関数追加: - HTML5 checkValidity() + validationMessage でブラウザロケール準拠エラー文言 - fieldset（plan）は制約検証対象外のため内部 required input を代替検査 - submit 時: エラー表示 + aria-invalid + 最初エラーフィールドへ focus + scrollIntoView - input/change 時: 復帰でエラー解除 + aria-invalid 削除 - WCAG 2.2 SC 3.3.1（A）/ 3.3.3（AA）完全達成 しゅんえい判断（2026-05-01 セッション 33）: 何度も指摘される観点 = リファレンス実装必須要件。 PR #124（2026-04-23 シンプル志向）の方針を反転。 Closes #195 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
form の
novalidate属性と JS 前提の custom error elements（<p class="c-form__error">× 7）、aria-describedby参照を削除し、HTML5 ブラウザネイティブバリデーションに統一する。Why
novalidateでブラウザ検証無効化 + JS バリデーション未実装 → 送信ボタン押下で画面遷移（バグ）required/type="email"等は保持、ブラウザが native で検証・エラー表示変更
<form novalidate>→<form>（1 箇所）<p id="xxx-error" class="c-form__error" role="alert" hidden>削除（7 箇所）aria-describedby="xxx-error"削除（7 箇所）.c-form__error { ... }CSS ルール削除保持
required,type="email",type="tel"）c-form__field/c-form__label/c-form__input/c-form__choice-group等）p-contact__formElement 併記--color-error変数（required マーク・:user-invalidで引き続き使用）機械走査
※ 仕様書の「期待: 7」はリスト本文（6 項目）と乖離した誤記。実際の required 数は 6 が正しい。
Test plan
pnpm run check通過（prettier / stylelint / eslint / markuplint 全通過）pnpm run build成功🤖 Generated with Claude Code