jQuery Form Validation Plugin 폼 검증 플러그인 간단 사용법

,

[2013-09-27 추가 : 최근에 새로 발견한 폼 검증 플러그인으로 Parsley.js가 있는데, 이게 더 좋아 보인다. 문서도 잘 돼 있다. 단, IE6를 지원하지 않는다. 따라서 한국에서는 당분간 쓰기 힘들 것 같다. 아니면, 서버단 밸리데이션을 반드시 하면서 js를 보조적으로만 활용할 때 Parsley.js를 사용하면 되겠다. (사실 당연한 이야기긴 하지만 말이다.)]

jQuery의 validation(검증) 플러그인이다. 일단 데모 페이지부터 보면 어떤 건지 알 수 있을 것이다.

validation 플러그인 데모 페이지

사용법은 사실 데모 페이지 긁어와서 이름만 고치는 정도로도 알 수 있을 텐데, 몇 가지 써 보자.

몊 가지 방법으로 사용할 수 있다. 첫 번째는 심플한 방법이다.

첫 번째 방법

이 방법은 위 데모 페이지에서 위쪽에 있는 예시에 사용된 방법이다.

△이 첫 번째 방법은 javascript 코드가 간단하다는 장점이 있는 반면, 메시지가 영어로 나오고, html 코드에 들어갈 게 많아진다는 단점이 있다. 비표준 어트리뷰트가 사용된다는 점도 단점이다.
$(function(){
  // submit 시켰을 때 #form을 검증합니다.
  $("#form").validate();
});

javascript 코드에는 위와 같이 쓰고(물론 jquery.js를 위 코드 전에 호출해야 하는 건 당연하다.) html에는 이렇게 적는 것이다.

<form id="form" method="get" action="">
  <fieldset>
    <legend>잘 적어 주세요</legend>
    <p>
      <label for="cname">이름 (필수, 최소 2글자)</label>
      <input id="cname" name="name" class="required" minlength="2" />
    <p>
      <label for="cemail">E-Mail (필수)</label>
      <input id="cemail" name="email" class="required email" />
    </p>
    <p>
      <label for="curl">URL (선택)</label>
      <input id="curl" name="url" class="url" value="" />
    </p>
    <p>
      <label for="ccomment">남기실 말씀 (필수)</label>
      <textarea id="ccomment" name="comment" class="required"></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit"/>
    </p>
  </fieldset>
</form>

위 코드에서 볼 수 있는 것처럼, html코드에 적어 주면 된다. 정리하면 다음과 같다.

  • 필수요소인 경우 required="required" 라고 쓴다. (required만 써도 된다.) 이것은 HTML5 문법이다. 그런데 이 플러그인이 알아서 처리한다. 라디오나 체크박스는 모든 input에 써 주면 된다.
  • class로 써도 된다. 이 경우  class="required" 라고 쓴다. 라디오나 체크박스는 맨 처음 input에 써 주면 된다.
  • email 검증을 해야 하는 경우 class="email"이라고 쓴다.
  • 필수이면서 이메일 검증을 해야 하는 경우에는 복수 클래스 병기하는 방법을 따라 class="required email" 이라고 적으면 되고 나머지도 마찬가지다. 혹은 required 속성을 주고 class="email"이라고 써 줄 수도 있다.
  • 최소 글자수가 있는 경우 minlength="숫자" 형태로 적는다.

위와 같은 방법으로 했을 때의 최대 단점은 메시지가 영어로 나온다는 점이다. 필수 요소인데 안 적은 경우 ‘This field is required.’라는 메세지가 뜬다. 메세지를 한국어로 하고 싶다면 두 번째 방법을 사용하거나 내가 만든 한국어 확장 파일을 사용하면 된다. 한국어 확장의 코드는 아래와 같다.

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: KO
 * Filename: messages_ko.js
 */
jQuery.extend(jQuery.validator.messages, {
	required: "반드시 입력해야 합니다.",
	remote: "수정 바랍니다.",
	email: "이메일 주소를 올바로 입력하세요.",
	url: "URL을 올바로 입력하세요.",
	date: "날짜가 잘못 입력됐습니다.",
	dateISO: "ISO 형식에 맞는 날짜로 입력하세요.",
	number: "숫자만 입력하세요.",
	digits: "숫자(digits)만 입력하세요.",
	creditcard: "올바른 신용카드 번호를 입력하세요.",
	equalTo: "값이 서로 다릅니다.",
	accept: "승낙해 주세요.",
	maxlength: jQuery.validator.format("{0}글자 이상은 입력할 수 없습니다."),
	minlength: jQuery.validator.format("적어도 {0}글자는 입력해야 합니다."),
	rangelength: jQuery.validator.format("{0}글자 이상 {1}글자 이하로 입력해 주세요."),
	range: jQuery.validator.format("{0}에서 {1} 사이의 값을 입력하세요."),
	max: jQuery.validator.format("{0} 이하로 입력해 주세요."),
	min: jQuery.validator.format("{0} 이상으로 입력해 주세요.")
});

다른 단점도 있다. minlength 라는 어트리뷰트는 웹표준 검증기를 통과하지 못한다. 표준 점수를 깎아먹을 수 있다는 것이다. 그게 사용성보다 중요한 요소는 아니지만, 웹을 잘 모르는 상관들에게는 중요할지 모른다.

두 번째 방법

이 방법은 모든 요소를 javascript 단에서 처리하기 때문에 가장 깔끔한 코드를 생산할 수 있다.

일단 코드를 보자.

$(function(){
  // validate signup form on keyup and submit
  $("#signupForm").validate({
    rules: {
      name: "required",
      password: {
        required: true,
        minlength: 8
      },
      confirm_password: {
        required: true,
        minlength: 8,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      name: "이름을 입력해 주세요",
      password: {
        required: "암호를 입력해 주세요",
        minlength: "암호는 8자 이상이어야 합니다."
      },
      confirm_password: {
        required: "암호를 한 번 더 입력해 주세요",
        minlength: "암호는 8자 이상이어야 합니다.",
        equalTo: "암호가 일치하지 않습니다."
      },
      email: "형식에 맞는 이메일을 입력해 주세요.",
      agree: "정책 동의에 체크해 주세요"
    }
  });
});

위에서 눈여겨 볼 점은 validate 안에 들어있는 {} 안쪽 부분이다. 여기 옵션이 들어간다.

이 옵션 중 핵심적으로 사용된 것인 rules 옵션이다.

rules: {옵션오브젝트}

이런 형식으로 사용된다. 옵션 오브젝트는 어떻게 구성되는지 보자.

{name: "required"}

이렇게 씌인 게 있다. 이것은 name이 “name”인 놈은 필수라는 뜻이다. 다른 방식으로 적용할 수도 있는데 한 input(혹은 textarea)에 여러 개의 옵션을 걸 때다.

email: {required: true, email: true}

이런 식으로 들어가는데, 이 때 email: true 항목은 당연히 이메일형식 검증을 하겠다는 뜻이다.

rules 옵션 아래쪽에 있는 message 옵션은 rules에 대응되는 메시지들을 적어주면 된다. 위 형식을 참고하면 될 것이므로 굳이 일일이 설명하지 않겠다.

다음 html 코드를 보자.

<form id="signupForm" method="get" action="">
  <fieldset>
    <legend>정보를 입력해 주세요</legend>
    <p>
      <label for="name">Lastname</label>
      <input id="name" name="name" />
    </p>
    <p>
      <label for="password">암호</label>
      <input id="password" name="password" type="password" />
    </p>
    <p>
      <label for="confirm_password">암호확인</label>
      <input id="confirm_password" name="confirm_password" type="password" />
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" />
    </p>
    <p>
      <label for="agree">개인정보 보호정책 동의</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree" />
    </p>
    <p>
      <input class="submit" type="submit" value="제출"/>
    </p>
  </fieldset>
</form>

위 코드는 html 검증을 통과할 수 있는 깔끔한 코드다. label에 있는 for 어트리뷰트는 웹표준에 맞는 어트리뷰트다. 이 라벨이 어떤 인풋에 대한 것인지, 해당 인풋의 id를 써 주는 부분이다.

그러나 jQuery 검증 플러그인의 자바스크립트 코드에서 위 폼을 인식할 때는 name 어트리뷰트를 기준으로 하는 것이므로, name을 신경쓰면 된다. 즉, label은 선택이니 너무 눈 돌아가지 않아도 된다는 말이다.

name을 바탕으로 하므로 checkbox나 radio 같은 것도 검증이 가능하게 된다.

필수다! 하는 메시지의 스타일

자, 그럼 required 라고 써준 input에 입력을 안 하고 submit 버튼을 눌렀을 때(이 경우를 ‘에러가 났을 때’라고 표현하자.) 나올 스타일은 어디서 결정할까?

그건 따로 써줘야 한다. 미리 준비된 css는 제공하고 있지 않은 듯하다.

사용되는 페이지의 head 부분에 아래처럼 써 주면 된다.

두 경우를 제공하겠다. 첫 번째 것은 메시지가 input의 오른쪽에 나오는 디자인이다. 두 번째 것은 메시지가 input의 하단에 나오는 디자인이다. 둘 다 input의 테두리가 빨간 점선으로 변하고, 메시지도 빨간 색으로 뜬다. css 지식이 조금만 있다면 수정해서 자신이 원하는대로 사용할 수 있을 것이다.

아래 스타일이 에러메시지를 input 오른쪽 공간에 띄워 주는 스타일이다.

<style type="text/css">
input.error, textarea.error{
  border:1px dashed red;
}
label.error{
  margin-left:10px;
  color:red;
}
</style>

아래 스타일은 에러메시지를 input 하단에 띄워 주는 스타일이다.

<style type="text/css">
input.error, textarea.error{
  border:1px dashed red;
}
label.error{
  display:block;
  color:red;
}
</style>

jQuery Validation Plugin 공식 문서

늘 공식 문서를 참고해야 한다.

[2012-02-21 추가] ajaxForm플러그인과 동시에 사용하려면 valid 함수를 사용한다.

[2012-11-04 추가] 체크박스나 라디오 버튼 검증 방법, 그리고 에러메시지 위치를 사용자가 지정하는 방법을 설명한 글을 올렸다.

카테고리 글 목록 👉

,

대표글

“jQuery Form Validation Plugin 폼 검증 플러그인 간단 사용법”에 대한 29개의 응답

  1. […] 폼 관련 처리를 할 때 가장 많이 사용하게 되는 게 jQuery ajaxForm 플러그인과 validation 플러그인인 것 […]

  2. 음 Jquery 검증플러그인 설명 잘봤어요
    잘 사용하던중에 질문이 있어서요
    저는 라벨을 이용해서 하지 않고 div태그 내부에 table을 만들어서 form을 만들었는데
    에러메세지만 컬러지정이 안되서요 –;;
    혹시나 table안에서 에러메세지 style 지정해주는 방법을 아시나요???

    1. 아!!! 아니면 다른 td칸에 뜨게하는것도 좋은데요 ㅎㅎㅎ

      1. 다른 td 칸에 뜨게 하려면 플러그인 내부를 만져야 할 지도 몰라요.

    2. 그냥 CSS로 지정을 해 주시면 되겠죠. CSS 문법에 따를 테니 적용되는 우선순위 등을 따져 보셔야 합니다.

  3. ㅋ 찾았습니다
    에러에러
    class에 error로 주고 for에 input 네임값을 넣어 주면 됩니다 ㅋ tr로 새줄만들어서 td안에 이 라벨 넣어주니까 거기 뜨네요 ㅋ
    generated속성을 넣어주면 validation에 지정된 message를 뿌려주고 아니면 label태그에 지정한 에러메시지가 나타나게 된다는데 이건 저도 잘 모르겠어요 –;; 테스트 중이라 ㅋ

    1. 음 리플에는 태그가 안써지네요 ㅋ lable테그 입니다 ㅎㅎ

  4. 으어어 저기 validation에서 한글이 깨져서 넘어가는데 euc-kr로 다 만들었다가 다시 다 utf-8로 만들고 인코딩도 utf-8로 만드느라 다시 다 쳤는데 깨져서 넘어가네요 –;;
    폼을 validation을 안통하고 가면 request.setCharacterEncoding(“UTF-8”); 이걸로 한글을 잘 받는데 validation만 타면 안되네요 –;;

    1. 혹시 모르니 js 인코딩을 점검해 보세요. script를 인클루드할 때

      <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>

      이런 식으로 캐릭터셋을 정해 주시는 게 좋습니다.

  5. post 방식으로 바꾸니까 되네요 음 예제는 get으로 되있길레 get방식으로 했는데 말이죠…
    멀 잘못 친건지 –;;
    div랑 table로 되있어서 그럴까요??음 의문입니다 이미 다 짜논걸 깨고 label로 다시 짜기는 귀찮고 이 홈페이지 다 만들면 테스트 해봐야겠습니다.
    디자이너가 없는관계로 포토샵이랑 손대면서 하다가 이왕 디자이너 없이하는거 jquery나 막써보자라는 생각에 jquery를 많이 사용하고 있는데 영문폰트로 만드는거랑 한글기본폰트로 만드는거랑 퀄리티 차이가 많이 나네요 ㅠㅠ한글기본폰트는 왜이렇게 안이쁘고 거칠어 보이는지 혹시 한글 기본폰트 이쁘게 사용할수 있는 방법좀 아시면 귀뜸 좀 해주세요 ㅎㅎ

    1. 어떤 환경에서 하셨어요? 전 예제 그대로 했는데 잘 검증되거든요. 알려 주시면 감사하겠습니다.
      폰트는 방법이 없습니다. 예쁘게 하려면 이미지가 짱입니다.

  6. 환경은 톰캣 7.0에 jre7 jsp 그외에 플레임워크는 사용안하고있습니다
    db는 mssql로 저장프로시저를 이용해서 db처리하고있고요 class에서 callablestatement이용해서 저장프로시저에 접속하는것만 컨트롤 해줍니다 그외에는 db에 접속하지 않고요 회원가입폼도 마찬가지 입니다. 폼 페이지 하나 class불러다 변수 넘겨주고 결과값이 넘어오는거 처리해서 페이지 이동시키는 페이지 하나 이렇게 되있습니다. ㅎㅎ 위에 h2테그이용해서 제목만드신거랑 댓글 기본폰트가 아닌데 저거 제가 가지고 있어서 저걸로 보이는 거겠죠? 웹폰트인가요??음…크롬인데 웹폰트는 안뜰꺼니깐 웹폰트는 아니군요 ㅋ혹시나 소스가 필요하시면 말해주세요 빠른시일내에 메일로 쏴드리겠습니다.

    1. 모빌리스 웹폰트입니다. 검색해 보시면 나옵니다. 하지만 썩 예쁘진 않은 거 같아요. 환경에 따라 울퉁불퉁하게 글씨가 나오기도 하거든요. ^^ 용량도 900kb나 돼서 본격 상용서비스에 사용하기는 부담이 있습니다.
      그리고 환경은, 이 플러그인이 자바스크립트기 때문에 서버나 디비는 완전히 무관합니다. 운영체제와 웹브라우저 종류, 버전을 알려주시면 됩니다.

      1. 그러고 보니 자바스크립트 인데 멍청한 짖을 했네요 –;;
        윈7에 크롬, 1.7.1 버전입니다~~

      2. 음 웹폰트 검색하다가 eot말고도 웹폰트가 많이 나왔네요 –;;
        역시 소식이 느리면 ㅠㅠ
        디자이너가 없어서 타이포그래픽으로 버튼만들기가 힘들어서 그냥 폰트로 만들고있거든요 ㅋ 안상수체가 유료일줄이야 ㅠㅠ 지금까지 무료인줄알았는데 충격이었습니다 ㅠㅠ

        1. woff…열심히 사용중입니다 ㅋ 나눔고딕이나 써야겠어요 ㅎㅎ

  7. 안녕하세요. validation에 대해 찾다가 구글링을 통해 들어왔습니다.

    질문이 있는데… 혹시 첫번째 방법을 이용할 경우 range 같은 validate는 어떠한 방식으로 작성하게 되나요? ‘true’나 한가지 값만 입력할때는 나와있는데 range같은 경우는 [1,10] 이게 원래 형식이다 보니 잘 모르겠네요. 조언부탁드려요~

  8. 정말 감사합니다.
    API Document와 API Doc의 예제만 봤는데 잘 작동하지 않아서 검새갛다가 들어왔습니다.
    정말 상세하게 적어두셨네요. 일단 돌아는 가는데 추후에 제 소스를 조금 손 봐야겠습니다. ^^
    궁금한게 있는데, 이렇게 검증을 하더라도 PHP단에서 다시 검증을 해야되지 않나요?

    1. 도움이 됐다니 좋네요 ^^
      네. PHP단에선 따로 검증을 해야 합니다. 이건 사용자 편의를 돕기 위한 한 방편인 거지 실제 검증을 하기 위한 거라고는 생각 안 하시는 게 좋아요. 물론 믿을만한 사용자만 있는 경우엔 굳이 PHP 검증까지 안 하는 경우도 있지만 말입니다.

  9. […] jQuery 폼 검증 플러그인 간단 사용법은 아주 예전에 쓴 적이 있다. 오늘은 두 가지를 추가로 설명할 생각이다. 나도 그 때보다 많이 실력이 늘었다. 하나는 체크박스나 라디오 버튼 검증, 다른 하나는 메시지를 원하는 위치에 띄우는 방법이다. 데모부터 보고 싶은 사람은 아래 링크로 데모를 보면 되겠다. […]

  10. 와 진짜 찾던 정보인데 너무감사드립니다 ~~

    1. 근데 만약 이미 구현된 밸리데이션을 수정하는 게 아니라면 http://parsleyjs.org/ 를 사용해 보시길 권합니다. HTML에 선언하는 방식이고 문서화도 잘 돼 있어서 이 플러그인보다 나은 것 같습니다. 저는 아직 본격 사용해 본 적은 없습니다만.

  11. 감사합니다.
    많이 도움이 되었네요 ㅋ

  12. jQuery-placeholder 와 모종의 문제를 발생시키는 군요.
    validate 문제는 아니고 jQuery-placeholder가 문제인듯 싶습니다.
    이 곳에서 글을 보고 jQuery-placeholder를 적용시켰었는데 IE 구버전들의 password 필드의 placeholder가 ****와 같이 나타나는 것을 해결하려고 jQuery-placeholder에서 패치가 있었던듯 싶습니다. fake-password 로 input type=”text”를 추가시켜서 placeholder를 해결하는 방식인듯 싶은데 그 방법으로 인해 validate 할 password 필드가 숨겨지는 바람에 문제가 되는 듯 싶습니다. password 필드에 required를 적용시키면 문제가 발생되서 골머리를 썩고 있습니다 ;ㅅ;

    1. 그렇겠네요 혹시 해결책을 찾으신다면 방법도 남겨 주시면 감사하겠습니다.

      1. 구 버전의 IE에서 password 필드에 값이 없을때 폼 검증이 될때가 문제라서 임시방편으로 전송버튼 자체를 disabled 시켜놨다가 password 필드에 값이 채워졌을때만 전송버튼을 활성화 시켜서 사용하고 있습니다.

        1. 아, 그것도 좋은 회피책이네요 :)

녹풍 에 응답 남기기응답 취소