スキルテスト: フォーム検証

この課題では、単純なサポートの問い合わせフォームを提供し、それに検証機能を追加してもらいます。

1. フォームを送信する前に、入力フィールドをすべて入力必須にしてください。
2. 「メールアドレス」と「電話番号」フィールドの型を変更し、ブラウザーが要求するデータに適した、より具体的な検証が適用するようにします。
3. 「ユーザー名」フィールドの要求される長さを 5 文字から 20 文字、「電話番号」フィールドの最大長を 15 文字、「コメント」フィールドの最大長を 200 文字にします。

フォームを送信してみてください。上記の制約が続くまで送信されず、適切なエラーメッセージが表示されるはずです。フォームフィールドが有効か不正かを表示させる単純な CSS を追加することを検討してください。

これで前回の課題と同じフォームを取り（必要であれば前回の回答を使用します）、正規表現を使って最初の 3 つのフィールドに固有のパターン検証を追加してください。

1. アプリケーションのユーザー名はすべて、単一の文字、続いてドット、続いて 3 つ以上の文字もしくは数字で構成されます。文字はすべて小文字にしてください。
2. ユーザーのメールアドレスはすべて、1 文字以上の英字（小文字または大文字）または数字の後に "@bigcorp.eu" が続きます。
3. 電話番号フィールドに長さの検証が存在する場合は、それを除去し、10 桁を受け入れられるように設定します。10 桁を連続して入力するか、3 桁、3 桁、4 桁のパターンをスペース、ダッシュ、ドットのいずれかで区切って入力してください。

この場合も、フォームフィールドが有効か無効かを表示させる単純な CSS を追加することを検討するとよいでしょう。

この最後の課題では、制約検証 API といくつかのフォーム検証属性を使用して、独自のエラーメッセージを提供してください。制約検証 API とフォーム検証属性を使用して、独自の有効性メッセージをプログラムしてください。

1. 入力必須とし、最小 10 文字とします。
2. 入力された値がメールアドレスであるかどうか、十分な長さであるかどうかを調べるイベントリスナーを追加してください。メールアドレスに見えないか、短すぎる場合は、適切なカスタムエラーメッセージをユーザーに提供してください。