My Forms

今回はメールアドレスがテーマです。これまでは入力内容のバリデーションを行ってきませんでしたが、今回は内容が正しいかをちゃんとチェックします。

メールアドレスのバリデーションは、input要素のtypeをemailとすればHTML側で行ってくれます。具体的には、アドレスの形式が正しければe.target.validity.validがtrueになり、正しくなければfalseになります。これをonChangeで都度確認します。

HTML標準でこういう機能を提供してくれるのはありがたいですね。この機能も完璧なものではないらしいですが、今回はありがたく利用しましょう。

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

1. 初回レンダリング時、変換結果が表示されるエリアに何も表示されていないこと
2. 初回レンダリング時、エラーメッセージが表示されていないこと
3. 初回レンダリング時、ボタンがdisabledになっていること
4. 正しいメールアドレスを入力した時、ボタンのdisabledが解除されること
5. 正しいメールアドレスを入力しフォーカスを外した時、エラーメッセージが表示されないこと
6. 正しくないメールアドレスを入力した時、ボタンがdisabledになっていること
7. 正しくないメールアドレスを入力しフォーカスを外した時、エラーメッセージが表示されること
8. 正しくないメールアドレスを入力しフォーカスを外し、再度フォーカスした時、エラーメッセージが表示されないこと
9. 正しいメールアドレスを入力し送信ボタンをクリックした時、結果が表示されるエリアに入力したメールアドレスが表示されること

を行っています。

• 2023年05月21日input要素にinputMode=“email”を付与。