JavaScriptで非同期バリデーション

公開:2014-11-04 / 制作・開発 /
更新:2016-06-02
icatch_workLady

一昔前は、フォームのバリデーションといったらサーバサイドに任せるしかありませんでした。

 

ところが、最近はJavaScriptで出来ることが増えてきたため、サーバとは非同期で処理することが増えてきました。

(ちなみに僕はTHAの中村雄吾さんにあこがれてFlashをガリガリ書いていた時期があったので、ActionScriptでのバリデートも経験してます。。。懐かしいなぁ~)

 

そのため、ユーザビリティを考慮し入力フォームなどはJavaScriptでバリデーションをすることが当たり前になっています。

(詳細は、入力フォームのバリデーションについてを参照してください)

 

今日は、JavaScriptで入力フォームのバリデーションについて説明したいと思います。

 

実装例

言葉だけだとわかりづらいので、具体的な例を挙げて説明します。

 

例として、問い合わせフォームで、氏名・電話番号・メールアドレス・内容に対してJavaScriptを利用してバリデート処理をします。

 

まず、html側の準備ですが、普通にformタグで入力フォームを作ります。

 

 

次にどの項目に、どういうバリデーションを施すかを仕様を定義します。

(上記フォームを参考に上から説明します)

 

必須が入っているか

対象のフィールドが空かどうか

(これは、「名前」「メールアドレス」「内容」で利用します)

 

メールアドレスかどうか

@がある。また@移行にドット「.」が一個以上存在する

 

電話番号かどうか

ハイフンなし10桁 or 11桁

 

上記ロジックをJavaScriptで記述すると、以下のとおりです。

 

 

参考サイト

僕の検証用WordPressサイトにページを用意しています。

ソース・動作を確認したい場合はhttp://penguinweb.net/69.htmlを参照してください。

 

注意事項

WordPressを利用している場合、記事投稿画面からJavaScriptのソースを記述しても動きません。

その場合は、WordPressで独自JavaScriptが動かない!を参考にしてください。

 

最後に

読み返してみると、こんな記述してたな~って思いました。

 

すごくレガシーな感じがします。

 

そう感じるのは、最近JavaScriptを使う場合は、必ずといっていいほどjOueryを使っているからですね。

 

時間が出来たら同じソースをjQueryで書いてみようと思います。

 


コメント一覧

コメントを残す

*

© yukio iizuka All Rights Reserved...