[jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기

jQuery Validation

form 입력 데이터의 유효성을 검증하는 것은 아주 중요한 일이다.

jQuery에서 제공하는 validate 플러그인은 유효성 검증을 더욱 쉽게 해주도록 도와준다.

 

사용자 입장에서 form에 데이터를 입력하고 submit을 했을 때,

개발자가 일일히 걸어놓은 유효성 검증을 거쳐 통과못한 경우에 계속해서 alert창이 뜬다면 번거로울 것이다.

validate플러그인을 이용하면

사용자가 빠르게 체크할 수 있도록 시각화해주고

onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능도 가능하다.

이 외에도 다양한 기능을 제공하니 공식문서를 확인하여 참고해야겠다.

https://jqueryvalidation.org/

jQuery Validation Plugin | Form validation with jQuery

- 2022/07/01 현재 버전 : 1.19.5v

- license : MIT

 

---

적용

 

✔️1. 사용을 위해 필요한 라이브러리 세팅

📌 CDN방식으로 라이브러리의 url을 직접 입력하는 방식도 있다.

내 경우에는  라이브러리를 다운 받아서 프로젝트 내에 심어두고, 그 경로를 불러오는 방식을 사용했다.  상황에 맞게 사용하면 된다.

참고 : CDN이란?

CDN(Content Delivery Network) : CND 서비스를 제공하는 업체 측에서 서버에 파일을 보관해두고 사용자는 그것을 script src를 통해서 가져갈 수 있도록 하는 방식. 

// CDN 방식
<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>

 

✔️2. 예제

📌 기본 형식

$("form").validate({
     /**
    * submitHandler : form 양식이 유효한 경우 실질적인 
    * submit을 하기 위한 콜백 핸들러. 
    * 유효성이 확인된 후 Ajax를 통해 처리
    */
    submitHandler: function() {
        console.log("submit!!!!");
    },
    rules: { // 체크할 항목들의 룰 설정: html상에서 name이랑 매핑된다.
        id: {
            required : true,
            minlength : 5,
            remote: "/"
        },
        password: {
            required : true,
            minlength : 3
        },
        repassword: {
            required : true,
            minlength : 3,
            equalTo : password
        },
        name: {
            required : true,
            minlength : 2
        },
        age: {
            digits : true
        },
    },
    messages : { //규칙체크 실패시 출력될 메시지
        id: {
            required : "필수로입력하세요",
            minlength : "최소 {0}글자이상이어야 합니다",
            remote : "존재하는 아이디입니다"
        },
        password: {
            required : "필수로입력하세요",
            minlength : "최소 {0}글자이상이어야 합니다"
        },
        repassword: {
            required : "필수로입력하세요",
            minlength : "최소 {0}글자이상이어야 합니다",
            equalTo : "비밀번호가 일치하지 않습니다."
        },
        name: {
            required : "필수로입력하세요",
            minlength : "최소 {0}글자이상이어야 합니다"
        },
        age: {
            digits : "숫자만 입력하세요"
        },
    },
    errorPlacement: function(err, element){ // 유효성 에러 발생시 처리하는 로직
        $(element).closest(".box-input").addClass("error");
    },
});

 

📌 실제 사용 예제를 살펴보자.

$('#inputForm').ajaxSubmit({
    url: '/', 
    method: 'post',
    data: $('#inputForm').serialize(),
    beforeSubmit: function(){ 
        $('#inputForm').validate({
            rules : {
                rcvrNm            : { required : true, minlength : 2 , maxlength : 20 },
                rcvrTelNo         : { required : true, minlength : 10 , maxlength : 11 },
                rcvrMailNo        : { required : true },
                rcvrAddr1         : { required : true },
                rcvrAddr2         : { required : false, chkDetail : true },
            },
            errorPlacement: function(error, element) {
                $(element).closest(".box-input").addClass("error");
            },
            success : function(label, element) {
                $(element).closest(".box-input").removeClass("error");
            },
        });

        return $('#inputForm').valid(); // return 값이 true면 Submit!
    },
    error: function(request, status, error) {
        console.log('code:' + request.status + '\n' + 'error:' + error);
    },
    success: function(result) { // submit 성공 후
        alert('submit 성공.');
    }
});

 

✔️3. Customizing

📌 기본적으로 제공되는 rule 이외에 다른 rule이 필요한 경우,

$.validator.addMethod로 custom rule을 등록할 수 있다.

인자로는 rule을 명시하는 도메인 값과 validate check function을 등록해주면 된다.

$.validator.addMethod(
    "chkDetail",
    function(value, element) {
        if( !$(element).prop("disabled") ) { // 활성화
            if($(element).val().length == 0) { // 입력하지 않았으면
                return false;
            }
        }
        return true;
});

 

📌 validate 검사에 실패할 경우, alert창을 띄우려면 setDefaults를 이용해서 옵션들을 변경해주면 된다.

jQuery.validator.setDefaults({
    onkeyup:false,
    onclick:false,
    onfocusout:false,
    showErrors:function(errorMap, errorList){
    var caption = $(errorList[0].element).attr('caption') ||
    $(errorList[0].element).attr('name');
    alert('[' + caption + ']' + errorList[0].message);
    }
});