jquery validation사용한 form 유효성 체크(alert, focus, display)

전자정부 프레임웍의 validation을 사용할 수 없게 되어 jquery validation을 적용한 내용을 정리 했습니다.

정리에 참고한 사이트는 아래와 같습니다.

 

https://jqueryvalidation.org/validate/

사용하는 기본 방법은 위의 페이지를 참고 하면 됩니다.

간략하게 정리하면

1) 관련 파일 다운로드(https://github.com/jzaefferer/jquery-validation/releases/tag/1.19.3)

2) 다운로드 폴더의 dist 하위의 .min.js 파일 프로젝트에 등록

3) 사용하려는 페이지 혹은 layout페이지에 추가

<script src="../../plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="../../plugins/jquery-validation/additional-methods.min.js"></script>
<script src="../../plugins/jquery-validation/localization/messages_ko.min.js"></script>

4) 사용하려는 페이지의 form 태그 ID값으로 유효성 체크 호출

$("#siteInfoForm").validate();

 

간단하게 form유효성 체크를 추가 할 수 있습니다.

해당 플러그인의 옵션이 있는데 해당 옵션을 이용해서 사이트정보를 입력, 수정하는 페이지에 필요한 방식으로

좀더 추가를 해보려고 합니다. 사용하는 옵션은 아래와 같습니다.

 

--옵션

debug(false): 디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다.

submitHandler: 폼이 submit 될때 핸들을 넘겨준다.(한번더 form.submit()등을 하지 않으면 실제 submit이 동작 하지 않습니다._)

invalidHandler: 입력값이 잘못된 경우 이벤트 발생관련 핸들을 넘겨 줍니다.

ignore: 유효성 검사에서 제외할 대상을 지정 합니다.

rules: 체크할 항목의 룰을 정의 합니다.(input 태그의 attribute에 작성하지 않고 script에서 따로 정의 할 수 있습니다.)

message: 유효성 검사 발생시 관련 메시지를 정의 합니다.

onsubmit: 유효성 체크 없이 무조건 submit을 실행 합니다.

onfocusout(true): 포커스가 대상에서 나갈때 유효성 검사를 합니다.(onkeyup과 동시에 발생되는 경우 의도치 않은 이벤트가 실행 될수 있습니다.)

onkeyup(true): 키보드 키가 올라가는 순간 유효성 검사를 실행 합니다.

onclick(true): click이벤트가 발생되는 순간 유효성 검사를 실행 합니다.

focusInvalid(true): 유효성 검사 후 포커스를 대상에 표시할지 여부

focusCleanup(false): true로 설정된 경우 에러필드에 포커스가 오면 에러메시지를 지웁니다.(focusInvalid와의 충돌에 주의 해야 합니다.)

errorClass: error클래스를 재 정의 할 수 있습니다.(기본은 error라는 클래스 명을 사용 합니다. 사용하려는 페이지에 이미 사용중인 class명이라면
error2와 같은 다른 클래스명을 사용 할 수 있습니다.

validClass : errorClass와 동일 합니다. 대상이 valid클래스인 것만 다릅니다.

ignoreTitle(false): 에러메시지로 title 항목이 사용되는걸 정의 합니다. (false:title항목 사용, true: title항목 사용하지 않음)

 

위의 내용을 토대로 input태그에 required 등의 항목을 추가해서 유효성 체크를 진행 하려고 합니다.

진행항 작업은 -alert메시지 -유효성 체크 후  focus이동 -메시지 출력시 title항목 이용해서 출력

3가지 작업 입니다.

-공통 js에 아래의 내용을 추가 해줍니다.

$(function () {
//페이지 로드 후 설정 동작하게(js, alert관련 내용이 먼저 로드 되어야 해서)
$.validator.setDefaults({
    onkeyup:false,
    onclick:false,
    onfocusout:false,
    ignoreTitle: true,

    ignore: [],
    showErrors:function(errorMap, errorList){
        if(this.numberOfInvalids()) {
         let targetTitle = ""; 
         try{
         this.errorList[0].element.focus();
         targetTitle = this.errorList[0].element.title+"은(는) ";
         }catch(error){}
        
            ToastAlert.fire({ icon: 'error', title: targetTitle+errorList[0].message});
        }
    }
});
});

 

ToastAlert.fire({ icon: 'error', title: targetTitle+errorList[0].message}); <- 유효성 체크 후 alert메시지 출력(sweetalert2 사용)

this.errorList[0].element.focus(); <- 포커스 이동(focusInvalid 후에 alert을 뛰우면서 focus 가 사라져 버리는 문제 대응)

targetTitle = this.errorList[0].element.title+"은(는) "; <- 메시지 출력시 title항목 사용

 

위의 코드 추가 후 $("#siteInfoForm").validate();를 사용하면 됩니다.

(alert을 사용하지 않으면 focusInvalid 옵션으로 focus관리가 가능 합니다.)

(form안의 항목들이 display none인 경우 유효성 체크를 진행 하지 않습니다. 이 부분은 ignore: [] 옵션을 넣어줘서 예외처리 하지 않고 모두 검증 할 수 있습니다.($("#siteInfoForm").validate().settings.ignore = [];))