2008年10月9日木曜日

"remember the milk"のSignupのバリデーションをjQueryで

スズキです。

有名な"remember the milk"のSignup情報登録時の
リアルタイムバリデーション!?
をjQueryのプラグインを使っての実現です。

利用するプラグインはこちらです。(有名どころですね)
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

日本語のメッセージファイルはこちらにありました。
http://www.goodpic.com/mt/archives2/2008/06/jqueryjqueryval.html

で、こんな感じで、emailに関しては、必須とEmail形式を、
passwordに関しては必須と8文字以上を条件にした、
リアルタイムバリデーション!?を実現することができます。

--------
<head>
  <script src="jquery.js"></script>
  <script src="validate.js"></script>
  <script src="messages_ja.js"></script>
  <script>
  $(function(){
    $("#login").validate({
      rules: {
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          minlength: 8
        }
      }
    });
  });
  </script>
</head>
<body>
  <form id="login">
    <input type="text"
        id="email" name="email"/>
    <input type="password"
        id="password" name="password"/>
    <input type="submit" value="ログイン"/>
  </form>
</body>
--------

詳しくはこちらです。
http://docs.jquery.com/Plugins/Validation

今後のHTMLフォームはデフォルトでこれ使うようにしよう。

--
http://suz-lab.blogspot.com/

0 コメント: