JavaScriptで非同期バリデーション
一昔前は、フォームのバリデーションといったらサーバサイドに任せるしかありませんでした。
ところが、最近はJavaScriptで出来ることが増えてきたため、サーバとは非同期で処理することが増えてきました。
（ちなみに僕はTHAの中村雄吾さんにあこがれてFlashをガリガリ書いていた時期があったので、ActionScriptでのバリデートも経験してます。。。懐かしいなぁ～）
そのため、ユーザビリティを考慮し入力フォームなどはJavaScriptでバリデーションをすることが当たり前になっています。
（詳細は、入力フォームのバリデーションについてを参照してください）
今日は、JavaScriptで入力フォームのバリデーションについて説明したいと思います。
実装例
言葉だけだとわかりづらいので、具体的な例を挙げて説明します。
例として、問い合わせフォームで、氏名・電話番号・メールアドレス・内容に対してJavaScriptを利用してバリデート処理をします。
まず、HTML側の準備ですが、普通にformタグで入力フォームを作ります。
|
1 2 3 4 5 6 7 8 9 |
※は必須です。 <br /><br /> <form action="http://penguinweb.net/69.html" method="post" name="test" onSubmit="return validation()"> <label>名前※<br /><input type="text" name="namae" size="40"></label><br /><br /> <label>メールアドレス※<br /><input type="text" name="email" size="40"></label><br /><br /> <label>電話番号<br /><input type="text" name="tel" size="40"></label><br /><br /> <label>内容※<br /><textarea name="comments" rows="2" cols="40"></textarea></label><br /><br /> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form> |
次にどの項目に、どういうバリデーションを施すかを仕様を定義します。
（上記フォームを参考に上から説明します）
必須が入っているか
対象のフィールドが空かどうか
（これは、「名前」「メールアドレス」「内容」で利用します）
メールアドレスかどうか
@がある。また@移行にドット「.」が一個以上存在する
電話番号かどうか
ハイフンなし10桁 or 11桁
上記ロジックをJavaScriptで記述すると、以下のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script type="text/javascript"> function validation(){ var errorMsg = ""; // 必須項目(空かどうか) if(document.test.namae.value == ""){ // 「名前」の入力チェック errorMsg = "名前が空です。\n"; } if(document.test.email.value == ""){ // 「メールアドレス」の入力をチェック errorMsg = errorMsg + "メールアドレスが空です。\n"; } if(document.test.comments.value == ""){ // 「コメント」の入力をチェック errorMsg = errorMsg + "内容が空です。\n"; } // メールアドレスチェック(@がある。また@移行にドット「.」が一個以上存在する) if(!document.test.email.value.match(/.+@.+\..+/)){ errorMsg = errorMsg + "メールアドレスの形式が異なっています。\n"; } // 電話番号チェック(ハイフンなし10桁or11桁) if(!document.test.email.value.match(/^\d{10}$|^\d{11}$/)){ errorMsg = errorMsg + "電話番号の形式が異なっています。\n"; } if(errorMsg) { alert(errorMsg); return false; } } </script> |
参考サイト
僕の検証用WordPressサイトにページを用意しています。
ソース・動作を確認したい場合はhttp://penguinweb.net/69.htmlを参照してください。
注意事項
WordPressを利用している場合、記事投稿画面からJavaScriptのソースを記述しても動きません。
その場合は、WordPressで独自JavaScriptが動かない！を参考にしてください。
最後に
読み返してみると、こんな記述してたな～って思いました。
すごくレガシーな感じがします。
そう感じるのは、最近JavaScriptを使う場合は、必ずといっていいほどjOueryを使っているからですね。
時間が出来たら同じソースをjQueryで書いてみようと思います。
http://yukioiizuka.com
コメント一覧
コメントはありません