jQuery Validation


jQueryライブラリ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
jQueryValidationライブラリ
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>

ユーザー名:
  
  
パスワード:
  
  

<form id="fm">
 ユーザー名:<label>
  <input type="text" id="username" name="username" size="20" />
 </label>
 パスワード:<label>
  <input type="text" id="password" name="password" size="20" />
 </label>
 <input type="submit" value="登録" />
</form>
<style>
 label {color: red;}
</style>


<script type="text/javascript">
  $(function(){
    $("#fm").validate({
      rules: {
        "username":{
          required: true,
          email: true
        },
        "password":{
          required: true,
          minlength: 6
        }
      },
      messages:{
        "username":{
          required: " ※ユーザー名は必須です。",
          email: " ※ユーザー名にはメールアドレスを入力して下さい。"
        },
        "password":{
          required: " ※パスワードは必須です。",
          minlength: $.validator.format(" ※パスワードは{0}文字以上を入力して下さい。")
        }
      }
    });
  });
</script>

jQuery

次の記事

jQuery Post