今回はjQueryを使って、「問い合わせフォーム」にバリデーション(検証)機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか?」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス(確認)」に入力されたテキストが同じか――をチェックします。
![jQueryでバリデーション付きメールフォームを作ろう (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c5cc038747f851a6643024dc05c0165ccaeecdd/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F07%2F22%2F240489%2Fl%2F947ffd95838c8645.jpg)