웹개발/jQuery

jQuery 유효성 검사, jQuery Validation Plugin 사용하기 (jquery.validate.js)

donsohn 2023. 2. 13. 21:25

요즘은 바닐라 자바스크립트나 프론트엔드 프레임워크를 사용하는 추세이다 보니, 제이쿼리는 점점 사용률이 떨어지고 있습니다.

하지만 그렇다고 해도 여전히 쉽고 간편한 문법과 무시할 수 없는 편리함 때문에 아직까지도 제이쿼리에 의존한 프로젝트나 웹페이지들은 많이 볼 수 있습니다.

그리고 일반적인 웹페이지가 아니라 폼을 입력받아서 전송하는 페이지에서 유효성 검사는 필수인데, 여기서 유효성 검사 스크립트를 매번 작성하는 것은 분명히 귀찮은 일일 것입니다.

 

그래서 제이쿼리를 사용하면서 쉽고 편리하게 폼 유효성 검사를 할 수 있는 플러그인인 jQuery Validation Plugin 을 살펴보겠습니다.

 

플러그인 설치

2023년 2월 12일 현재 기준 버전은 1.19.5 버전입니다.

이 플러그인은 꽤 오래 전부터 사용했던 것으로 기억하는데, 업데이트가 자주 되지는 않는 듯 합니다.

 

최신 버전 CDN : https://www.jsdelivr.com/package/npm/jquery-validation

 

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month. Built for production use.

www.jsdelivr.com

 

 

아니면, 페이지 내에 아래와 같이 소스를 삽입하여 설치하셔도 됩니다.

CDN 방식으로 사용하셔도 되고 자체 서빙하셔도 상관 없습니다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

아, 물론 jQuery 기반의 플러그인이기 때문에 당연히 이 플러그인이 로드되기 전에 jQuery를 먼저 호출하셔야 합니다.

아래처럼요.

 

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

플러그인 사용 방법

그렇다면, 바로 아래와 같은 폼이 있다고 가정하고 바로 예시를 들어 보겠습니다.

폼 필드는 이름 필드, 비밀번호 필드, 비밀번호 확인 필드, 이메일 필드, 연락처 필드, 체크박스 필드로 구성해 보았습니다.

아무래도 유형별로 정리하여 예시로 보여드린다면 실무에서 작업하시는 프로젝트에 보다 수월하게 적용하실 수 있지 않을까 싶었습니다.

 

간단한 폼 구성 화면

 

HTML의 구성과 기본적인 사용법은 아래와 같습니다.

 

    <div class="wrapper">
        <form id="frmtest">
            <div class="form-field">
                <label class="label-form" for="username">성명</label>
                <input type="text" class="form-control" name="username" id="username" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="password">비밀번호</label>
                <input type="password" class="form-control" name="password" id="password" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="password_confirm">비밀번호 재확인</label>
                <input type="password" class="form-control" name="password_confirm" id="password_confirm" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="email">이메일 주소</label>
                <input type="email" class="form-control" name="email" id="email" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="tel">연락처</label>
                <input type="tel" class="form-control" name="tel" id="tel" required>
            </div>

            <div class="form-field">
                <input type="checkbox" name="chk_agree" id="chk_agree" required>
                <label for="chk_agree">약관에 동의합니다</label>
            </div>

            <div class="form-field">
                <button type="submit" class="button-submit">제출하기</button>
            </div>
        </form>
    </div>
    
    <script>
        jQuery(function() {
            const myForm = $('#frmtest');
            myForm.validate();
        });
    </script>

 

위 코드와 같이 작성하고 제출하기 버튼을 클릭하면, 아래와 같이 유효성 검증이 진행됩니다.

 

기본적인 유효성 검사

 

여기서, validate 내에 세부 옵션 설정으로 좀 더 구체적인 유효성 체크가 가능해집니다.

바로 rules 옵션인데요. rules 옵션은 아래와 같은 설정을 지원합니다.

 

  • required : 필수 입력 요구
  • remote : 필드 검증을 위해 다른 파일(페이지)로부터 지정 (예 : check.php)
  • maxlength : 최대 입력값
  • minlength : 최소 입력값
  • email : 이메일 유효성 검증
  • url : URL 유효성 검증
  • date : 날짜형태 유효성 검증
  • dateISO : ISO 날짜 형태 유효성 검증
  • number : 10진수 숫자 형태 유효성 검증
  • digits : 반드시 숫자 형태로만 입력하도록 유효성 검증
  • creditcard : 신용카드 형태 유효성 검증
  • equalTo : 특정 값과 일치하는지 검증 (예 : 비밀번호 재확인 입력값 검증시 사용)
  • accept : 파일의 확장자 유효성 검증 (예 : accept: "audio/*", accept: "jpg|jpeg|png|gif")
  • rangelength : 글자의 입력 자릿수를 최소값 - 최대값 범위로 검증 (예 : range : [10, 20]);
  • range : 글자의 입력 자릿수가 반드시 이 범위 내에 해당하도록 검증 (예 : range : [15, 25]);
  • max : 숫자의 최대값 지정
  • min : 숫자의 최소값 지정

 

위에 있는 rules의 속성을 사용하면, 아래와 같이 간단하면서 원하는 형태대로 유효성 검증이 가능해집니다.

뿐만 아니라, messages 속성을 사용해서 아래와 같이 유효성 검증에 실패할 경우 띄워줄 메시지도 변경 가능합니다.

 

rules 속성과 messages 속성을 사용한 유효성 검사

 

<div class="wrapper">
        <form id="frmtest">
            <div class="form-field">
                <label class="label-form" for="username">성명</label>
                <input type="text" class="form-control" name="username" id="username" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="password">비밀번호</label>
                <input type="password" class="form-control" name="password" id="password" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="password_confirm">비밀번호 재확인</label>
                <input type="password" class="form-control" name="password_confirm" id="password_confirm" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="email">이메일 주소</label>
                <input type="email" class="form-control" name="email" id="email" required>
            </div>

            <div class="form-field">
                <label class="label-form" for="tel">연락처</label>
                <input type="tel" class="form-control" name="tel" id="tel" required>
            </div>

            <div class="form-field">
                <input type="checkbox" name="chk_agree" id="chk_agree" required>
                <label for="chk_agree">약관에 동의합니다</label>
            </div>

            <div class="form-field">
                <button type="submit" class="button-submit">제출하기</button>
            </div>
        </form>
    </div>
    
    <script>
        jQuery(function() {
            const myForm = $('#frmtest');
            myForm.validate({
                rules: {                    // 유효성 검사 규칙
                    username: {             // 이름 필드
                        required: true,     // 필수 입력
                        minlength : 2       // 최소 입력 길이
                    },
                    password: {             // 비밀번호 필드
                        required: true,     // 필수 입력
                        minlength: 6        // 최소 입력 길이
                    },
                    password_confirm: {     // 비밀번호 재확인 필드
                        required: true,     // 필수 입력
                        minlength: 6,       // 최소 입력 길이,
                        equalTo: password   // 비밀번호 필드와 동일한 값을 가지도록
                    },
                    email: {                // 이메일 필드
                        required: true,     // 필수 입력
                        email: true         // 이메일 형식 검증
                    },
                    tel: {                  // 연락처 필드
                        required: true,     // 필수 입력
                        digits: true        // 숫자 형태로만 입력 가능하도록 설정
                    },
                    chk_agree: {            // 약관 동의 체크박스
                        required: true      // 필수 체크
                    }
                },
                messages: {                 // 오류값 발생시 출력할 메시지 수동 지정
                    username: {
                        required: '필수 입력 항목입니다.',
                        minlength: '최소 {0}글자 이상 입력하세요.'
                    },
                    password: {
                        required: '필수 입력 항목입니다.',
                        minlength: '최소 {0}글자 이상 입력하세요.'
                    },
                    password_confirm: {
                        required: '필수 입력 항목입니다.',
                        minlength: '최소 {0}글자 이상 입력하세요.',
                        equalTo: '동일한 비밀번호를 입력해 주세요.'
                    },
                    email: {
                        required: '필수 입력 항목입니다.',
                        email: '올바른 이메일 형식으로 입력하세요.'
                    },
                    tel: {
                        required: '필수 입력 항목입니다.',
                        digits: '반드시 숫자만 입력하세요.'
                    },
                    chk_agree: {
                        required: '필수 체크 항목입니다.'
                    }
                }
            });
        });
    </script>

 

스타일링

이 플러그인을 사용했을 때, 유효성 검사에 실패하면 해당 인풋에 error 클래스가 자동으로 부여됩니다.

이를 활용하여 스타일 시트를 구성하면 보다 명확하게 오류가 있는 항목인지를 보여줄 수 있습니다.

이번 포스팅의 예제는 아래 코드펜으로 확인하실 수 있습니다.

 

See the Pen jQuery Validation Plugin by sootopia (@sootopia) on CodePen.

 

이외에도 rules를 직접 커스터마이징할 수도 있고, submitHandler 속성을 활용해서 AJAX를 활용한 폼 전송에도

매우 편리하게 사용이 가능합니다.

더 상세한 내용은 공식 홈페이지 내의 DOCUMENTATION 을 참고하셔서 사용하시면 되겠습니다.

 

'웹개발/jQuery'의 다른글

  • 현재글jQuery 유효성 검사, jQuery Validation Plugin 사용하기 (jquery.validate.js)
댓글

티스토리툴바