リアルタイムでエラーチェックする

＜アンケート調査結果Vol.2イライラ編＞ユーザーがフォーム入力中イラつく原因 を見ていたら、1位は「イライラの理由1位「正しく入力したつもりがエラーと判定される」75％」らしいです。私も確かに経験があります。旅行サイトとかに多いですよね・・・。

このリアルタイムエラーチェック機能を、jQuery Live Form Validation というjQueryプラグインを利用することで簡単にフォームに実装できます。

ヘッダに追加

<script type="text/javascript">

            jQuery(function(){
                jQuery("#Email").validate({
                    expression: "if (VAL.match(/^[^\W][a-zA-Z0-9\_\-\.]+([a-zA-Z0-9\_\-\.]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                    message: "メールアドレスを正しく入力してください。"
                });
                jQuery("#Mobile").validate({
                    expression: "if (VAL.match(/^[9][0-9]{9}$/)) return true; else return false;",
                    message: "携帯電話番号を正しく入力してください。"
                });
            });

</script>

HTML例

<form action="" method="post">
  <table>
    <tbody>
      <tr>
        <td> メールアドレス </td>
        <td><input type="text" name="Email" id="Email" />
        </td>
      </tr>
      <tr>
        <td> 携帯番号 </td>
        <td><input type="text" name="Mobile" id="Mobile" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" style="background: #EFEFEF;"/>
        </td>
      </tr>
    </tbody>
  </table>
</form>