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

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

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

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

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

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

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

実装例

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

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

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

※は必須です。
<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で記述すると、以下のとおりです。

<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で書いてみようと思います。

Author：yukio iizuka

フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com