投稿日 :
更新日 :
あなたの名前を半角小文字アルファベットで入力し、「変換する」ボタンをクリックしてください。名前を大文字に変換して表示します。
Form1、Form2と同じく、入力した半角小文字アルファベットを大文字にして表示するフォームです。それらは半角小文字アルファベット以外（ここでは「変換不可文字」と呼びます）も入力し送信可能でしたが、今回は変換不可文字が混じっている時はそもそもフォームを送信できない仕様にしています。
また、変換不可文字を入力すると、その時点で「半角小文字アルファベットと半角スペースのみ入力可能です。」と表示され、さらにテキストボックスのborderが赤くなります。これが本当のリアルタイムバリデーションですね。
テストコードはこちらです。テストに関して特筆すべきことはしていないので省略します。
ただ、今回はARIA属性を絡めたコードを書いているので補足します。
フォームに入力された値が変換不可文字を含んでいる場合、useStateを用いてaria-invalid属性の値をtrueにするようにコードを書いています。
aria-invalid属性とは何でしょうか？私も詳しくは説明できないので仕様書を読んでほしいのですが（WAI-ARIAの仕様書）、入力された値が不正な場合は値をtrueにして、その旨をユーザーや支援技術に知らせるaria属性である、と読み取りました。
そしてCSSでは、このaria-invalid属性の値に応じてスタイルを返るようにしています（コードはこちら）。WAI-ARIAを勉強するまでの私なら「.validate-error」などといったCSSクラスを付与してスタイルを切り替えてしまっていた所ですが、よりセマンティックになるようにCSSを書いています。