[JAVA] JAVASCRIPT jQuery Validation - 제이쿼리로 필수체크하기 !

[JAVA] jQuery Validation 

- 제이쿼리로 필수체크하기 !

제이쿼리 Validation 플러그인을 이용해서 필수체크 포스팅입니다.

공식 사이트 URL  : https://jqueryvalidation.org/

를 이용하시어서 로컬로 사용하시거나,  CDN 을 통해 플러그인을 다운받아 사용하시길 바랍니다.

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

* 당연히, jQuery 라이브러리도 존재하여 합니다.

플러그인의 사용방법이 간단하니, 간단한 예제 소스를 보면서 이해해보도록 하겠습니다.

$(function(){

 var endText = '을(를) 입력하여 주십시오.'

$("#formId").validate({

rules: {

// name 값

birth: "required",

phone1: "required",

phone2: "required",

postNum: "required",

      addressRoad: "required",

      addressJibun: "required",

          addressDetail: "required",

   'week[]':"required"

     },

    messages: {

// name 에 대한 validation 메세지 

    phone1:"전화번호 " + endText,

    birth: "생년월일" + endText,

    phone2: "휴대폰 번호" + endText,

    postNum: "우편번호" + endText,

    addressRoad: "도로명 주소" + endText,

    addressJibun: "지번 주소" + endText,

    addressDetail: "상세주소 " + endText,

'week[]':"최소 한개 이상의 요일을 선택하여 주십시오."

    },

   // 에러 엘리먼트는 div 속성

    errorElement : 'div',

    errorPlacement: function(error, element){

   // 예시 1

            if (element.attr("type") == "checkbox"){

                error.appendTo("#errorToShow");

            }else{

         // 예시 2

                error.insertAfter(element);

            }

        }

   });

});

[ 결과 View ]

예시 1 ) 체크박스는 하나 이상이 체크되어야 하는 경우의 Validation 

예시 2 ) 이외의 나머지 에러인 경우,