jQuery validation plugin을 이용한 form validation 처리 2

1. 플러그인 설치

일반적인 javascript 라이브러리와 마찬가지로 이 플러그인 역시 다운로드해서 설치하거나 cdn 방식으로 설치할 수 있다. 특별한 이유가 아니라면 CDN 방식의 사용을 권장한다.

이 플러그인은 jQuery 기반이기 때문에 당연히 jQuery가 먼저 삽입되어야 한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

 

2. 기본 함수 사용법

다음 폼에 대한 validation을 처리해보면서 사용법을 익혀보자.

<form id="myform">
	<fieldset>
		<legend>사용자 정의 Validation 처리</legend>
		<label for="name">이름 * </label>
		<input type="text" id="name" name="name" placeholder="2~10 글자">
		<br>
		<label for="email">이메일 * </label>
		<input type="text" id="email" name="email" placeholder="abc@def.net">
		<br>
		<input type="submit">
	</fieldset>
</form>

 

가장 핵심적인 함수는 validate 라는 함수이다. 이 함수는 jQuery를 통해 폼 요소에 추가된다. 따라서 기본 사용법은 아래와 같다.

$("#myform").validate({});

이 함수는 form에서 submit  이벤트가 발생할 때 자동적으로 호출되기 때문에 별도로 호출할 필요는 없다.

 

validate 함수의 파라미터로는 options 객체가 들어가는데 이 객체의 속성과 거기에 어떤 value를 할당하는가가 중요하다.

$("#myform").validate({
	rules:{/*체크할 validation 항목*/},
	messages:{/*validation 처리에 실패했을 때 보여줄 메시지*/},
	submitHandler:function(){}// form 전송 이외에 ajax등 어떤 동작이 필요할 때
});

먼저 rules는 value로 다른 객체를 갖는데 화면의 어떤 input 요소에 대해 어떤 validation을 체크할 것인지 설정한다.

messages는 rules에서 설정했던 validation 항목이 실패했을 때 화면에 보여줄 메시지로 일반적으로 rules와 짝을 이뤄서 작성된다.

submitHandler는 함수를 작성하는데 만약 form을 submit 하지 않고 ajax와 같이 처리하고자 할 경우 작성한다. 단순히 form 전송으로 처리할 경우는 작성할 필요가 없다.

 

3. rules와 messages 작성

먼저 rules에 대해 살펴보자.

rules 역시 다른 객체를 가질 수 있는데 이 객체는 다시 input 요소의 name(주의!! id가 아니다) 을 키로, 그 요소에서 체크할 항목들로 작성된다.

$("#myform").validate({
	rules:{
		name: {
			required: true,
			rangelength: [2,10]
		},
		email:{
			email: true
		}
	},
	messages:{/*validation 처리에 실패했을 때 보여줄 메시지*/},
	submitHandler:function(){}// form 전송 이외에 ajax등 어떤 동작이 필요할 때
});

위의 예는 하나의 rules 안에 name과 email 요소의 validate 체크 항목을 지정한다. 
name은 required니까 필수여야 하고 rangelength에서 범위를 2~10글자로 한정한다.
email은 email의 형식을 지켜야 한다.

느닷 없이 이런 항목은 어디서 나온건가??

 

validate 플러그인은 사전에 내장된 validation 메서드들을 제공한다.

https://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods)

 

Documentation | jQuery Validation Plugin

위 링크를 들어가보면 어떤 의미이고 어떻게 사용하면 되는지 샘플이 아주 잘 나와있다.

messages 는 위에서 작성했던 rules의 내용에 맞춰서 validation 체크에서 실패한 경우 보여줄 메시지를 작성해주면 된다.

$("#myform").validate({
	rules : {
		name : {
			required : true,
			rangelength : [ 2, 10 ]
		},
		email : {
			email : true
		}
	},
	messages : {
		name : {
			required : "이름은 필수 입력입니다",
			rangelength : "이름은 {0}에서 {1}자까지 사용 가능합니다."
		},
		email : {
			email : "이메일 형식을 확인하세요."
		}
	},
	submitHandler : function() {
	}// form 전송 이외에 ajax등 어떤 동작이 필요할 때
});

 

이번 예에서 살펴본 method들 말고도 다양한 녀석들이 준비되어있고 이름만 봐도 용도가 쉽게 파악되며 예제도 잘 작성되어있기 때문에 다른 메서드들에 대한 설명은 생략한다.

 

4. 동작 확인

이제 validation에 실패하도록 값을 입력 후 제출 버튼을 눌러보자.

 

알아서 messages에 설정한 값이 입력 요소 뒤에 출력되는 것을 볼 수 있다. 이 마법은 어떻게 이뤄지는 것일까?

개발자 도구로 실제 돔을 보면 비밀이 쉽게 밝혀진다.

개발자 도구를 살펴보면 일단 에러가 발생하면 input 요소에는 error 라는 이름의 클래스가 추가되고 뒤에 별도의 <label>이 추가되는데 여기에 오류 메시지가 표시되는 구조다. 당연히 이런 수고는 validate lib가 처리해준다.

input과 label 모두에 error 라는 클래스를 추가해 주기 때문에 이를 이용하면 강조된 화면 구성을 해볼 수 있다.

<style>
.input-title {
	display: inline-block;
	width: 80px;
}

input.error {
	border: 1px solid red;
}

label.error{
	color: red;
}
</style>

 

 

[관련글]

validation 처리 1: www.goodteacher.tistory.com/161

validation 처리 2: www.goodteacher.tistory.com/162

validation 처리 3: www.goodteacher.tistory.com/163

validation 처리 4: www.goodteacher.tistory.com/164