[정보] jquery.validator 정리

jquery 플러그인 중 하나인 jquery.validator 의 옵션을 분석(해석?)해 본 겁니다.
뭐 별 쓸데도 없는 문서지만 기왕 정리한거 저 같이 영어레벨이 쎄멘바닥인 분들한테는 조금이나마 도움이 될까 하여 올려봅니다.
스프링노트에 적어두었던걸 그대로 옮긴거라 경어가 아닌점 양해바랍니다.
중간 중간 몰라서 분석 못한것도 있구요 잘못된 부분이 있을지도 모릅니다. ㅠㅠ 말씀해 주시면 수정하겠습니다.

jquery.validator

Option 정리

debug

기본값: false

디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다

$(".selector").validate({
     debug: true
})  

submitHandler

폼이 submit 될때 마지막으로 뭔가 할 수 있도록 핸들을 넘겨준다.

$(".selector").validate({
     submitHandler: function(form) {
       $(form).ajaxSubmit();
     }
})  

invalidHandler

입력값이 잘못된 상태에서 submit 할때 자체처리하기전 사용자에게 핸들을 넘겨준다.

<arguments>

form

validator

ignore

유효성검사에서 제외할 Element를 지정한다.

$("#myform").validate({
     ignore: ".ignore"
})  

rules

체크할 항목들의 룰을 설정한다.

$(".selector").validate({
     rules: {
       // simple rule, converted to {required:true}
       name: "required",
       // compound rule
       email: {
         required: true,
         email: true
       }
     }
})  

$(".selector").validate({
     rules: {
       contact: {
         required: true,
         email: {
           depends: function(element) {
             return $("#contactform_email:checked")
           }
         }
       }
     }
})  

message

무효한 필드일때 왜 무효한지 설명하는 메세지를 설정한다.

$(".selector").validate({
     rules: {
       name: "required",
       email: {
         required: true,
         email: true
       }
     },
     messages: {
       name: "Please specify your name",
       email: {
         required: "We need your email address to contact you",
         email: "Your email address must be in the format of name@domain.com"
       }
     }
})  

$(".selector").validate({
     rules: {
       name: {
         required: true,
         minlength: 2
       }
     },
     messages: {
       name: {
         required: "We need your email address to contact you",
         minlength: jQuery.format("At least {0} characters required!")
       }
     }
})  

groups

다수의 Element를 그룹을 지어서 한쪽에서 에러메세지를 보여준다.

임의의 위치를 설정하기 위해서는 errorPlacement 안에서 할 수 있고 따로 설정이 없을경우 지정한 마지막 엘리먼트끝에 출력된다.

$("#myform").validate({
    groups: {
      username: "fname lname"
    },
    errorPlacement: function(error, element) {
       if (element.attr("name") == "fname" 
                   || element.attr("name") == "lname" )
         error.insertAfter("#lastname");
       else
         error.insertAfter(element);
     },
     debug:true
})  

onsubmit

유효성체크 없이 무조건 submit 한다

$(".selector").validate({
     onsubmit: false
})  

onfocusout

기본값 : true

포커스가 떠날때 유효성 검사를 한다. onkeyup도 false가 되어 있어야 눈으로 체감할 수 있다.

$(".selector").validate({
     onfocusout: false
})  

onkeyup

기본값 : true

키를 뗄때 유효성검사를 한다.

$(".selector").validate({
     onkeyup: false
})  

onclick

기본값 : true

checkbox 와 radio 버튼이 클릭될때 유효성 검사를 한다.

$(".selector").validate({
     onclick: false
})  

focusInvalid

기본값 : true

유효성 검사 후 포커스를 해당 무효필드에 둘 것인가 여부

$(".selector").validate({
     focusInvalid: false
})  

focusCleanup

기본값 : false

true 로 설정되어 있을 경우 잘못된 필드에 포커스가 가면 에러메세지를 지운다

$(".selector").validate({
     focusCleanup: true
})  

meta

엘리먼트에 class="..." 형식으로 지정하려고 하는데 다른 플러그인과 겹칠경우 이를 {[이름]{옵션1, 옵션2}} 와 같이 싸서 이용할 수 있도록 한다 (이건 정확한건지는 모르겠음)

$("#myform").validate({
     meta: "validate",
     submitHandler: function() { alert("Submitted!") }
})  

HTML : <input type="text" name="email" class="{validate:{ required: true, email:true }}" />  

errorClass

기본값 : error

에러메세지의 CSS 클래스이름을 설정한다.

기본값은 .error 로 출력되는데 이 class 명을 바꿀 수 있다.

예를 들어 기본값일 경우에는 CSS 정의에서

.error{color:#00f}

이런식으로 사용할 수 있는데 만약 class 명을 invalid 라고 바꿨다면

.invalid{color:#00f}

라고 사용할 수 있다.

$(".selector").validate({
     errorClass: "invalid"
})  

validClass

유효성체크에서 성공한 값들의 클래스이름을 설정한다.

errorClass 와 같은 개념이다.

$(".selector").validate({
     validClass: "success"
})  

errorElement

에러메시지를 출력하는 엘리먼트의 태그요소를 결정한다.

errorClass의 개념과 같으나 HTML 태그를 바꾼다.

$(".selector").validate({
     errorElement: "em"
})  

wrapper

에러 메세지들을 임의의 태그로 묶는다.

만약 에러메세지들이 아래와 같이 생성되었다면

<label class='error'>This field is required</label>

<label class='error'>Your lastname, please!</label>

wraper:'li' 라고 했을때

<li>

<label class='error'>This field is required</label>

<label class='error'>Your lastname, please!</label>

</li>

로 묶어버린다. 이 기능은 주로 errorLabelContainer 와 같이 사용된다.

$(".selector").validate({
     wrapper: "li"
})  

errorLabelContainer

에러메세지들의 해당 무효필드 옆에 보여주는게 아니라 한곳에 묶어 보여줄때 이용된다.

출력을 원하는 위치의 엘리먼트 아이디를 써주면 된다.

$("#myform").validate({
     errorLabelContainer: "#messageBox",
     wrapper: "li",
     submitHandler: function() { alert("Submitted!") }
})  

errorContainer

기존 상세 에러메세지 외에 대표적 에러메세지를 보여줄때 사용한다.

예를 들어 아래와 같다.

아이디 : 아이디가 입력되지 않았습니다. <== 기존 상세에러메세지

비밀번호 : 비밀번호가 입력되지 않았습니다 <== 기존 상세에러메세지

***************************************************************

입력폼에 에러가 있습니다. 입력폼을 다시 확인하세요 <== 이 부분에 해당

***************************************************************

지정한 상세에러메세지가 모두 사라질 때까지 이 메세지는 사라지지 않는다.

errorContainer 로 선언한 것 중 errorLabelContainer 로 선언되지 않은 것이 이에 해당한다.

해당되는 메세지는 자동으로 입력되는 메세지가 아니다. 이건 원본의 데모페이지를 봐야 이해가 가능할거 같다.

http://docs.jquery.com/Plugins/Validation/validate 여기서 Options 탭을 눌러 검색

showErrors

에러처리를 하기전에 사용자에게 핸들을 넘겨준다. 그러므로 에러처리를 override 하거나 선행처리할 때 사용할 수 있다. 맨아래 팁이 이걸 응용한거다.

$(".selector").validate({
    showErrors: function(errorMap, errorList) {
        $("#summary").html("Your form contains "
            + this.numberOfInvalids() 
            + " errors, see details below.");
        this.defaultShowErrors();
    }
})  

errorPlacement

기본값 : 무효한 필드 바로 뒤

에러 메세지의 위치를 지정할 수 있다. 이건 실험을 안해봤음. 뭐 되겠지 ^ ^;

$("#myform").validate({
    errorPlacement: function(error, element) {
       error.appendTo( element.parent("td").next("td") );
    },
     debug:true
})  

success

이건 validClass 하고 똑같은 효과던데 차이가 뭔지 잘 모르겠다. 나중에 알아봐야겠다.. ㅜㅜ

$("#myform").validate({
     success: "valid",
     submitHandler: function() { alert("Submitted!") }
})  

highlight

기본값 : errorClass 를 추가시킨다

필드가 Invalid 됐을때 어떻게 하이라이트 시킬까를 결정할 수 있다.

예를 들어 아래와 같이 페이드 인, 아웃 효과를 주는것도 가능하다 ^^

$(".selector").validate({
    highlight: function(element, errorClass) {
       $(element).fadeOut(function() {
         $(element).fadeIn();
       });
    }
})  

unhighlight

기본값 : errorClass 를 제거한다.

highlight 된걸 다시 되돌릴때 무엇을 할까를 지정할 수 있다.

아규먼트는 highlight하고 동일하다.

ignoreTitle

별 필요없는 거 같다. 뭐 제거될거란 이야기인가? ㅋ 사실 잘 모르겠다 ㅜㅜ

$(".selector").validate({
     ignoreTitle: true
})  

 

※ 팁 : invalidate 할때 페이지에 메세지를 뿌리는게 아니라 기존방식대로 경고창(alert)으로 띄우고 싶다면 아래처럼 옵션을 주면 된다.

클라이언트들이 구식방식을 선호할때가 있음 -_-;;;

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);
}
});
< input type="text" name="mb_name" caption="이름" class="required" /> caption 은 임의로 정한 attribute 명입니다. caption="이름" 이런식으로 주면 됨

 

http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=72358

 

http://phpschool.com/link/tipntech/72358