[jQuery] 제이쿼리 validation 활용하여 유효성 검사(ajax 실시간 통신, 유효성 실패 메시지 변경)

jQuery validation 커스텀

 

제이쿼리 validation 플러그인의 기본적인 사용법은 저번 포스팅을 참고하면 좋을 것 같다.

2023.02.28 - [Programming/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기

 

 

이번 포스팅에는 좀 더 자유도 높게 다양한 커스터마이징을 해보려고 한다.

 

 

---

적용

 

✔️1. 필드에 입력 시, 실시간 ajax 통신하여 유효성 검사하기

 

📌input에 입력할 때, 서버 호출하여 유효성을 검사하는 방법이다.

자주 쓰이는 예를 들자면 바로 회원가입할 때, 동일한 ID 존재 여부 검사이다.

 

사실 커스터마이징할 필요 없이, jquery validation은 remote라는 메소드를 제공해주긴 한다.

관련된 문서는 여기를 참고하면 된다.

https://jqueryvalidation.org/?s=remote

 

그런데, 나는 addMethod를 이용해서 구현해보려고 한다.

참고로 addMethod는 additional-methods.min.js를 프로젝트 내에서 CDN 방식이든, 파일을 import하든 넣어줘야 사용가능하다.

 

<ajax의 beforeSend 또는 ajaxSubmit의 beforeSubmit 부분에 넣어주는 코드>

$("#inputFrm").validate({
        rules: {
            id: {required: true, maxlength: 30, regex: /^[a-z_]+$/;, isEqualId : true},
        },
        messages: {
            id: {required: "ID를 입력해 주세요."
                , maxlength: "입력 가능한 최대 글자수를 초과하였습니다."
                , regex: "영문 소문자와 언더바(_)로 입력 가능합니다."
                , isEqualId: "동일한 ID가 있습니다. 다른 ID를 입력해 주세요."},
            
        },
        errorPlacement: function(error, element) {
            $(element).closest(".box-input").addClass("error");
        },
        success : function(label, element) {
            $(element).closest(".box-input").removeClass("error");
        },
    });
    
    return $('#inputFrm').valid(); // true면 submit!

 

<따로 함수로 빼놓는 코드>

// 동일 ID여부 체크
$.validator.addMethod("isEqualId", function(value, element){
    let res = false;
    $.ajax({
        url : "/api/exist/id",
        type : "GET",
        async: false,
        data : {
            id : $("#id").val();
        },
        success : function (result) {
            res = result; // false : 동일 코드 존재
            return res;
        }
    });
    return res;
});


// ID의 정규식 체크
$.validator.addMethod("regex", function (value, element, regexp) {
    let re = new RegExp(regexp);
    let res = re.test(value);
    return res;
})

 

이렇게 작성하면 ID 를 입력 시에 동일한 ID가 있는지 /api/exist/id url에 매핑된 서버와 통신한다.

controller단의 return 형식은 boolean이어야한다.

 

✔️2. 유효성 검사에 통과 못한 규칙 명, 메시지 객체 얻기

 

📌입력 시에 유효성 실패한 rule에 따라 messages를 다르게 보여주고 싶었다.

당연히 jquery validation에 기본적으로 errorPlacement를 사용하여 간단히 메시지를 노출할 수 있지만,

내가 원하는 위치에 메시지를 커스텀해서 띄우기 위해 다른 방법이 필요했다.

 

찾아보니,

$('#inputFrm').validate()

안에 여러가지 객체들이 담겨있는 것을 확인할 수 있었다.

 

이 안에 errorList 객체를 꺼내어, 내가 지정한 rules, messages 정보들을 얻을 수 있다.

이것을 활용하여 다양하게 커스텀할 수 있다.

 

아래는 단순히 활용한 예이다.

$("#inputFrm").validate({
        rules: {
            id: {required: true, maxlength: 30, regex: /^[a-z_]+$/;, isEqualId : true},
        },
        messages: {
            id: {required: "ID를 입력해 주세요."
                , maxlength: "입력 가능한 최대 글자수를 초과하였습니다."
                , regex: "영문 소문자와 언더바(_)로 입력 가능합니다."
                , isEqualId: "동일한 ID가 있습니다. 다른 ID를 입력해 주세요."},
            
        },
        errorPlacement: function(error, element) {
            let validator = $('#inputFrm').validate();
            for (let i = 0; i < validator.errorList.length; i++) {
                let error = validator.errorList[i];
                // console.log("입력 필드의 유효성 검사 통과 못한 규칙: " + error.method);
                // console.log("유효성 실패 메시지: " + error.message);
                $(element).closest(".box-input").find(".txt-error").text(error.message);
            }
            
            $(element).closest(".box-input").addClass("error");
            //error.insertAfter(element);
        },
        success : function(label, element) {
            $(element).closest(".box-input").removeClass("error");
        },
    });
    
    return $('#inputFrm').valid(); // true면 submit!