My Forms

Form3ではリアルタイムバリデーションを実装してみました。送信ボタンを押して初めてエラーメッセージが表示されるのではなく、送信ボタンを押す前に表示されるアレですね。

しかし、入力途中でエラーメッセージが出るとイラッとします。今回の例ですと最低文字数は8文字ですから、1~7文字目を打っている間にずっとエラーメッセージが表示されるわけです。これから勉強しようとしている時に、お母さんに「勉強しなさい！」と怒られた時の感情と似ています。これは良くありませんね。

さらに言うと、タイプミスして最初から入力し直す場合もあるので、入力中は黙っておいて欲しいわけです（パスワードはその性質上、特に打ち直す可能性が高いと思われます）。

onChangeで文字数をカウントするのは筋が悪いので、onBlurを使用することにしました。onBlurはフォーカスが外れた時に動作するイベントハンドラーです。フォーカスが外れた時に文字数をカウントして、8文字未満ならエラーメッセージを表示させます。

再度フォーカスした時は無条件でエラーメッセージを消します。onFocusハンドラーでフォーカス時の動作を定義できます。

しかしこれは「リアルタイム」ではないかも？とさっき思いましたが、細かいことは気にすんな。

テストコードはこちらです。テストは、

1. 初回レンダリング時、入力したパスワードが表示されるエリアに何も表示されていないこと
2. 初回レンダリング時、エラーメッセージが表示されていないこと
3. テキストボックスに文字が入力されていない時、ボタンがdisabledになっていること
4. テキストボックスに8文字以上の文字が入力されている時、ボタンがdisabledになっていないこと
5. テキストボックスに7文字以下の入力してからフォーカスを外した時、エラーメッセージが表示されること
6. テキストボックスに7文字以下の入力してからフォーカスを外し、再度フォーカスした時、エラーメッセージが表示されないこと
7. テキストボックスに8文字以上の入力してからフォーカスを外した時、エラーメッセージが表示されないこと
8. テキストボックスに文字を入力し設定ボタンをクリックした時、入力した文字と同じ文字が表示されること

を行っています。

• 2023年05月10日エラーメッセージ「パスワードは8文字必要です。」を「パスワードは8文字以上必要です。」に修正。その他細かい文言を修正。