validation(검증) 플러그인

폼을 사용하다보면 유효성을 체크해야할 경우가 많다.

필수 입력란이 비어있지는 않은가, 숫자만 입력해야하는데 문자를 입력하지 않았는가 등등...

데이터베이스 처리 부분에는 asp로 제어를 하면 되지만 일단 폼에서 체크를 하기 위해 자바스크립트를 써야한다.

하지만 일일이 체크를 하려면 얼마나 귀찮을까...

jQuery 플러그인 중 좋은게 있어서 적어본다.

jquery.validation.js

위 이미지는 샘플페이지의 회원가입 폼이다.

자바스크립트 경고창을 띄우지 않으니 얼마나 좋은가.

물론 플러그인 자체내에서 경고창을 띄우게 옵션을 변경할 수도 있다.

HTML

<style type="text/css">
.relatived { position:relative }
input.invalid, textarea.invalid { border:1px dotted #ff0000 !important; }
label.invalid { position:absolute; left:20px; top:-20px; display:block; color:#747474; width:auto; font:11px/11px Dotum; text-align:left; line-height:11px; border:1px solid #FF8033; padding:5px; background:#ffffff; }
<style>
<form id="fo_insert_member" action="./" method="post">
<table cellspacing="0">
  <tr>
    <th><div>아이디</div></th>
    <td class="wide">
      <div class="relatived"><input type="text" name="user_id" value="" class="inputTypeText" id="user_id" /></div>
      <p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
    </td>
  </tr>
  <tr>
    <th><div>비밀번호</div></th>
    <td class="wide">
      <div class="relatived"><input type="text" name="password" value="" class="inputTypeText" id="password" /></div>
      <p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
    </td>
  </tr>
  <tr>
    <th><div>비밀번호 확인</div></th>
    <td class="wide">
      <div class="relatived"><input type="text" name="password2" value="" class="inputTypeText" id="password2" /></div>
      <p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
    </td>
  </tr>
</table>
</form>

JS

var add_member_srl = "?member_srl=회원 번호";

var query_user_id = "아이디 체크할 경로";
var query_member = "폼 전송할 페이지";

$("#fo_insert_member").validate({
  errorClass:"invalid",
  rules: {
    user_id: { 
      required:true, minlength:3, maxlength:20, remote:{ type: "post", url: query_user_id }
    },
    password: {
      required:true, minlength:6, maxlength:20
    },
    password2: {
      required:true, equalTo:"#password"
    }
  },
  message: {
    user_id: {
      required: "사용자 ID를 입력해주세요.",
      user_id: "사용자 ID는 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.",
      remote: "사용할수 없는 아이디입니다."
    },
    password: {
      required: "사용자 비밀번호를 입력해주세요.",
      minlength: "비밀번호는 6자 이상 입력해주세요.",
      maxlength: "비밀번호는 20자까지 입력 가능합니다."
    },
    password2: {
      required: "비밀번호를 입력해주세요.",
      equalTo: "비밀번호가 일치하지 않습니다."
    },
  },
  submitHandler: function(form) {
    $.post( query_member, $(form).serialize(),
    function( data ) {
     // 폼 전송후 할 행동
    });
  }
})

옵션

debug
기본값: false
디버그 할수 있도록 입력값이 유효해도 전송하지 않는다.
$(".test").validate({
  debug: true
})

submitHandler
폼이 submit 될때 마지막으로 먼가 할수 있도록 핸들을 넘겨준다.