jQuery Validation 플러그인을 이용하여 손쉽게 검증하기

보통 웹 프로젝트에서 폼전송을 하기전 필수값 혹은 검증을 하는 절차를 거친다음 DATA SUBMIT을 해줍니다.

보통 ALERT창으로 'XXX값을 입력하세요'라는 형태로 경고창을 띄운 후 return으로 막습니다.

이번에 소개할 jQuery Validation 은 폼 submit 전에 검증을 해주는 플러그인입니다.

jQuery Validation을 사용하면 검증을 통과하지 못할 경우 

통과 못한 폼태그 하단에 경고문구를 출력시키고 자동으로 submit을 방지해줍니다.

이 기능을 구현해보기 위해서 연동을 해보도록 하겠습니다.

우선 validation 플러그인제공 URL로 접속을 합니다.

http://jqueryvalidation.org

받으셨다면 하단 영역에 Download버튼을 클릭하여 파일을 다운로드 받도록 합니다.

다운로드를 받으셨다면 

압축해제후 dist 디렉토리에 존재하는 additional-methods.min.js 와 jquery.validate.min.js 

그리고 localization 디렉토리내에 messages_ko.min.js 파일을

 웹프로젝트 경로에 INCLUDE 하도록 합니다.

※ min파일말고 일반 js파일들을 include해주셔도 상관없습니다

저는 그냥 용량 적은파일을 선택한것 뿐...

jquery.validate : 검증플러그인 (필수)

additional-methods : 미리 정의된 일부검증 메서드 (선택)

messages_ko : 검증실패시 출력되는 오류에대한 한국어 문구지원(선택)

첫번째로 필수값 체크하는 부분에 대해서 다루어 보도록 하겠습니다.

INCLUDE해야 할 파일

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="additional-methods.min.js"></script>
<script type="text/javascript" src="messages_ko.min.js"></script>

다음으로는 폼검증을 위한 HTML파일코드입니다.

검증을 위한 HTML 코드

<form action=""> 
	<input type="text" name="txt1" required="required"/><br/>
	<input type="text" name="txt2" /><br/>
	<input type="text" name="txt3" required="required"/><br/>
	<input type="text" name="txt4" required="required"/><br/>
	<input type="submit"  value="저장" />
</form>

이어서 자바스크립트 코드입니다.

JAVASCRIPT CODE

$(function(){
	$("form").validate();
})

위에 대한 사용이 제일 기본코드 양식입니다.

원래 input 태그들의 required="required" 속성은 HTML5의 속성으로 크롬/사파리/파이어폭스 등에는  대부분 지원이 가능하지만 

IE의 경우는 10이상에서만 지원이 가능한 속성이므로 모든 브라우저 호환을 위해서 현재는 validation 플러그인을 사용하시면 

좋을거 같습니다.

※ validate 함수를 사용하여 form태그안에 들어있는 태그검증을 위해서는 태그들마다 name값은 필수

위 코드 기준으로 실행결과를 확인해 보도록 하겠습니다.

실행결과

위와같이 태그의 required 속성을 준 태그에 대해서는 

빈값으로 submit 전송시 "필수 항목입니다."라는 문구가 출력되는것을 

확인하였습니다.

프로젝트에서 검증을 할때는 

글자수 체크를 하거나 

ajax체크를해서 중복값인지등

다양한 방법도 존재합니다.

validation 플러그인은 규칙까지 별도로 만드는 기능까지 제공해주니 정말 좋은거 같습니다.

그럼 이제 자신만의 규칙을 만들어서 검증하는 코드를  회원가입예를들어 작성해보도록 하겠습니다.

이번코드에서는 INCLUDE한 파일들중 additional-methods, messages_ko JS파일을 제거합니다.

미리 정의되어있는 규칙들을 사용하면 좋지만 영문 + 한국어에 대한 정보가 몇 없어서 직접 규칙을 만들어서 적용을 하겠습니다.

규직작성에 필요한 validate의 속성은

"rules"라는 규칙정의하는 부분과 "

messages"라는 검증실패일 경우 화면에 띄워줄 문구내용의 

속성이 필요합니다.

기본적으로 회원가입예제 HTML 코드를 작성해보도록 하겠습니다.

회원가입 html코드

<form action="/test.jsp" id="frm">
	아이디 : <input type="text" name="id" id="id"/><br/>
	비밀번호 : <input type="password" name="password" id="password"/><br/>
	비밀번호확인 : <input type="password" name="repassword" id="repassword"/><br/>
	나이 :  <input type="text" name="age" id="age"/><br/>
	이름 : <input type="text" name="name" id="name"/><br/>
	이메일 : <input type="text" name="email" id="email"/><br/>
	홈페이지 : <input type="text" name="homepage" id="homepage"/><br/>
	<input type="submit" value="회원가입" />
</form>

validate 함수를 사용하시기 위해서는 name값을 설정해주셔야하고 

rules라는 규칙정의를 위해서는 id값을 설정해주셔야 하는거 같습니다.

각각의 검증을 위하여 스크립트코드를 다음처럼 작성해보았습니다.

Validation 검증 스크립트 코드

$(function(){
		$("form").validate({
			//validation이 끝난 이후의 submit 직전 추가 작업할 부분
			submitHandler: function() {
				var f = confirm("회원가입을 완료하겠습니까?");
				if(f){
					return true;
				} else {
					return false;
				}
			},
			//규칙
			rules: {
				id: {
			    	required : true,
			    	minlength : 5,
			    	remote: "/check_id.jsp"
			    },
			    password: {
			    	required : true,
			    	minlength : 3
			    },
			    repassword: {
			    	required : true,
			    	minlength : 3,
			    	equalTo : password
			    },
			    name: {
			    	required : true,
			    	minlength : 2
			    },
			    age: {
			    	digits : true
			    },
			    email: {
			    	required : true,
			    	minlength : 2,
			    	email : true
			    },
			    homepage: {
			    	url : true
			    }
			},
			//규칙체크 실패시 출력될 메시지
			messages : {
				id: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다",
			    	remote : "존재하는 아이디입니다"
			    },
			    password: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다"
			    },
			    repassword: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다",
			    	equalTo : "비밀번호가 일치하지 않습니다."
			    },
			    name: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다"
			    },
			    age: {
			    	digits : "숫자만입력하세요"
			    },
			    email: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다",
			    	email : "메일규칙에 어긋납니다"
			    },
			    homepage: {
			    	url : "정상적인 URL이 아닙니다"
			    }
			}
		});
})

별도로 id 검증부분에 remote라는 속성이 존재합니다.

이 부분은 ajax를 통해서 입력값을 서버페이지로 전달하여 

true/false 결과값을 받아서 검증하는 방식입니다.

임의의 remote이해를 돕기위한 check_id.jsp 샘플코드

if(request.getParameter("id").equals("test123")){
	out.print(false);
} else {
	out.print(true);
}

최종 SUBMIT 페이지인 test.jsp 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 회원가입이 완료되었습니다.
</body>
</html>

위의 로직흐름을 적어보자면

1. 페이지 로딩

2. 각 입력태그들의 검증절차 진행

    id의 경우에는 기본 검증들이 마친 후 다른 입력폼으로 넘어갈경우 remote ajax call이 이루어짐 

    (false일 경우 messages 속성의 id -> remote 문구 출력)

3. submitHandler 적용하지 않을시 submit 처리 진행 

    submithandler에서 ajax로 submit로 가능하며 또다른 작업을 진행이 가능합니다.

실행결과를 확인하도록 하겠습니다.

Validation 폼검증 실행결과

위와같이 간단하게 validation 플러그인을 사용하여 폼 검증을 해보았습니다.

by 개발로짜