[Jquery] jQuery Validation Ajax연동과 message custom

1. 개요

• 다음과 같은 예제 4개를 설명한다.
• 기본 사용법예제
• Ajax연동을 통한 ID중복체크예제
• 별도로 정규식을 추가한 커스텀예제
• rule 동적 추가 및 삭제예제

jquery validate

2. 제공속성

required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
step: $.validator.format( "Please enter a multiple of {0}." )

 

 

3. 기본예제

• required 아래 trim처리 부분은 공백을 제거하기 위함이다.
• submitHandler는 userForm이라는 <form>태그안에 submit버튼을 작성하면 해당부분이 동작한다.

var jvalidate;
$(document).ready(function () {
    jvalidate = $("#userForm").validate({
        ignore: [],
        rules: {      
            userId: {
                required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
                },
                maxlength: 6,
                rangelength: [5,20],
            },
            userNm: {
                required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
                },
                maxlength: 60
            },
            useYn: {
                required: true
            }
        },
        submitHandler: function() {

        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
    });
});

//HTML
<div class="form-group">
    <label>사용자아이디</label>
    <input type="text" name="userId" id="userId" class="form-control"/>
</div>

//CSS
bootstrap.css
Bootstrap v4.6.1 (https://getbootstrap.com/)

 

 

4. 사용자아이디 중복체크 기능

• jquery validator에서 userId 항목에 아이디 중복체크 기능을 추가하고 싶다면 아래처럼 하면된다.

//javascript
......
rules: {      
    userId: {
        maxlength: 6,
        duplUserId:true
    },
}
......


//duplUserId처리
$.validator.addMethod('duplUserId', function(response) {
    var result = true;
    var url = "아이디중복체크 URL"
    $.ajax({
        url : url,
        type : "POST",
        async : false,
        dataType : "json",
        data : {"userId":function(){return $("#userId").val()} },
        dataFilter: function(data) {
            var json = JSON.parse(data);
            if(json.duplCount > 0){
                result = false;
            }else{
                result = true;
            }
        }
    });
    return result;
}, '중복된 사용자아이디가 존재합니다.');

 

 

5. 별도 정규식 추가

• 별도로 정규식을 추가하고 싶다면 아래와 같이 한다.

//javascript
......
rules: {      
    userId: {
        maxlength: 6,
        userIdReg:true
    },
}
......


//userIdReg처리
const js_reg_exp_id = /^[a-z0-9]{4,16}$/;
$.validator.addMethod('userIdReg', function(response) {
    var result = true;
    if(!js_reg_exp_id.test($("#userId").val())){ 
        result = false;
    }
    return result;
}, '잘못된 아이디 형식입니다.');

 

 

6. 동적rule생성 및 삭제

• 상황에 맞게 동적으로 rule을 추가하거나 삭제할려면 아래와 같이한다.

//input 엘리먼트의 경우
$('input[name="userId"]').rules('add', 'required');
$('input[name="userId"]').rules('remove', 'required');

//select box 엘리먼트의 경우
$('select[name="useYn"]').rules('add', 'required');
$('select[name="useYn"]').rules('remove', 'required');