JavaScript

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

1. 웹 클라이언트에서의 Validation 처리란?

웹 프로그래밍을 하는 과정에서 클라이언트로부터 무언가를 입력 받기 위해서는 form을 이용한다. 그런데 개발자의 입장에서는 "사용자가 이런 형태로 입력해야하는데.. "하는 값들이 있다.

예를 들어 이름은 필수 입력 항목이고, 2자 이상, 10자 이내여야 한다거나 이메일의 양식을 준수하거나 비밀번호는 영문, 숫자, 특수문자를 포함해서 8글자 이상 16글자 미만 등이다.

사용자가 개발자의 의도대로 값을 잘 넣었는지 확인하는 것을 validation 처리라고 한다. 일반적으로 validation 처리는 클라이언트 단에서 한번, 서버단에서 한번 실행하는 것이 좋다.

클라이언트 단에서 실행되는 validation 처리는 사용자가 값을 제대로 입력했는지 못했는지 알 수 있게 한다. 대부분 이 과정이 잘못되었을 경우 특별한 처리를 이용해 값을 제대로 입력하도록 유도한다.

2. 기본적인 validation 처리를 위한 코드

그럼 위와 같은 동작을 처리하기 위한 코드를 살펴보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.error {
	color: red;
}

label[for] {
	display: inline-block;
	width: 80px;
}
</style>
</head>
<body>
	<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$("#myform").on("submit", function(e) {
		// 기본 제출 동작 중지
		e.preventDefault();
		// 요소에 대한 validation 처리
		if (!isValidId()) {
			$("#name").after("<span class='error'>이름 형식을 확인하세요.</span>");
			return;
		}
		// valid 하다고 판단된다면 ajax로 서버 요청
		$.ajax({
			// do something..
		});
	})

	function isValidId() {
		// id가 name인 요소 바로 뒤에 오는 <span class='error'> 요소
		$("#name + span.error").remove();
		let val = $("#name").val();
		return val.length >= 2 && val.length <= 20;
	}
</script>
</html>

3. 코드 잘 짜볼 수 있지만..

위의 샘플 코드와 같이 간략한 자바 스크립트를 이용해 시간만 충분하다면 원하는 기능을 만드는 것이 어렵지 않다. 중요한건 시간만 충분하다면. ㅜㅜ

문제는 위의 폼과 달리 실제 웹에서 사용하는 폼은 훨씬 많은 input 요소들을 가지고 있으며 그것들에 대한 validation 체크가 모두 필요하다. 그 와중에서 또 다행스럽기도 하고 짜증 나는 것이 validation 내용이 약간씩 다르다. 어디는 글자 10자까지, 어디는 글자 20자까지, ....

이런 다양한 요구사항을 매번 코딩으로 처리하는것은 즐거운 일은 아니다.

슬슬 짜증이 난다면 다음과 같은 플러그인의 사용을 고려해보자.

https://jqueryvalidation.org/

jQuery Validation Plugin | Form validation with jQuery

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an exi

jqueryvalidation.org

다음 포스트에서는 이 플러그인의 사용법에 대해 알아보자.

[관련글]

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

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

jQuery validation plugin을 이용한 form validation 처리 3 (0)	2020.05.12
jQuery validation plugin을 이용한 form validation 처리 2 (0)	2020.05.12
[Vue] render:h=>h(App) (1)	2019.11.14
유용한 링크 모음 (0)	2019.11.08
[vanilla js]forEach와 some (0)	2019.11.05

Contents

새소식