출처:http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=72358
수리도랑님
jquery.validator
Option 정리
기본값: false
디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다
$(".selector").validate({
debug: true
})
폼이 submit 될때 마지막으로 뭔가 할 수 있도록 핸들을 넘겨준다.
$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
})
입력값이 잘못된 상태에서 submit 할때 자체처리하기전 사용자에게 핸들을 넘겨준다.
<arguments>
form
validator
유효성검사에서 제외할 Element를 지정한다.
$("#myform").validate({
ignore: ".ignore"
})
체크할 항목들의 룰을 설정한다.
$(".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")
}
}
}
}
})
무효한 필드일때 왜 무효한지 설명하는 메세지를 설정한다.
$(".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!")
}
}
})
다수의 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
})
유효성체크 없이 무조건 submit 한다
$(".selector").validate({
onsubmit: false
})
기본값 : true
포커스가 떠날때 유효성 검사를 한다. onkeyup도 false가 되어 있어야 눈으로 체감할 수 있다.
$(".selector").validate({
onfocusout: false
})
기본값 : true
키를 뗄때 유효성검사를 한다.
$(".selector").validate({
onkeyup: false
})
기본값 : true
checkbox 와 radio 버튼이 클릭될때 유효성 검사를 한다.
$(".selector").validate({
onclick: false
})
기본값 : true
유효성 검사 후 포커스를 해당 무효필드에 둘 것인가 여부
$(".selector").validate({
focusInvalid: false
})
기본값 : false
true 로 설정되어 있을 경우 잘못된 필드에 포커스가 가면 에러메세지를 지운다
$(".selector").validate({
focusCleanup: true
})
엘리먼트에 class="..." 형식으로 지정하려고 하는데 다른 플러그인과 겹칠경우 이를 {[이름]{옵션1, 옵션2}} 와 같이 싸서 이용할 수 있도록 한다 (이건 정확한건지는 모르겠음)
$("#myform").validate({
meta: "validate",
submitHandler: function() { alert("Submitted!") }
}) HTML : <input type="text" name="email" class="{validate:{ required: true, email:true }}" />
기본값 : error
에러메세지의 CSS 클래스이름을 설정한다.
기본값은 .error 로 출력되는데 이 class 명을 바꿀 수 있다.
예를 들어 기본값일 경우에는 CSS 정의에서
.error{color:#00f}
이런식으로 사용할 수 있는데 만약 class 명을 invalid 라고 바꿨다면
.invalid{color:#00f}
라고 사용할 수 있다.
$(".selector").validate({
errorClass: "invalid"
})
유효성체크에서 성공한 값들의 클래스이름을 설정한다.
errorClass 와 같은 개념이다.
$(".selector").validate({
validClass: "success"
})
에러메시지를 출력하는 엘리먼트의 태그요소를 결정한다.
errorClass의 개념과 같으나 HTML 태그를 바꾼다.
$(".selector").validate({
errorElement: "em"
})
에러 메세지들을 임의의 태그로 묶는다.
만약 에러메세지들이 아래와 같이 생성되었다면
<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"
})
에러메세지들의 해당 무효필드 옆에 보여주는게 아니라 한곳에 묶어 보여줄때 이용된다.
출력을 원하는 위치의 엘리먼트 아이디를 써주면 된다.
$("#myform").validate({
errorLabelContainer: "#messageBox",
wrapper: "li",
submitHandler: function() { alert("Submitted!") }
})
기존 상세 에러메세지 외에 대표적 에러메세지를 보여줄때 사용한다.
예를 들어 아래와 같다.
아이디 : 아이디가 입력되지 않았습니다. <== 기존 상세에러메세지
비밀번호 : 비밀번호가 입력되지 않았습니다 <== 기존 상세에러메세지
***************************************************************
입력폼에 에러가 있습니다. 입력폼을 다시 확인하세요 <== 이 부분에 해당
***************************************************************
지정한 상세에러메세지가 모두 사라질 때까지 이 메세지는 사라지지 않는다.
errorContainer 로 선언한 것 중 errorLabelContainer 로 선언되지 않은 것이 이에 해당한다.
해당되는 메세지는 자동으로 입력되는 메세지가 아니다. 이건 원본의 데모페이지를 봐야 이해가 가능할거 같다.
http://docs.jquery.com/Plugins/Validation/validate 여기서 Options 탭을 눌러 검색
에러처리를 하기전에 사용자에게 핸들을 넘겨준다. 그러므로 에러처리를 override 하거나 선행처리할 때 사용할 수 있다. 맨아래 팁이 이걸 응용한거다.
$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains "
+ this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})
기본값 : 무효한 필드 바로 뒤
에러 메세지의 위치를 지정할 수 있다. 이건 실험을 안해봤음. 뭐 되겠지 ^ ^;
$("#myform").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
debug:true
})
이건 validClass 하고 똑같은 효과던데 차이가 뭔지 잘 모르겠다. 나중에 알아봐야겠다.. ㅜㅜ
$("#myform").validate({
success: "valid",
submitHandler: function() { alert("Submitted!") }
})
기본값 : errorClass 를 추가시킨다
필드가 Invalid 됐을때 어떻게 하이라이트 시킬까를 결정할 수 있다.
예를 들어 아래와 같이 페이드 인, 아웃 효과를 주는것도 가능하다 ^^
$(".selector").validate({
highlight: function(element, errorClass) {
$(element).fadeOut(function() {
$(element).fadeIn();
});
}
})
기본값 : errorClass 를 제거한다.
highlight 된걸 다시 되돌릴때 무엇을 할까를 지정할 수 있다.
아규먼트는 highlight하고 동일하다.
별 필요없는 거 같다. 뭐 제거될거란 이야기인가? ㅋ 사실 잘 모르겠다 ㅜㅜ
$(".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="이름" 이런식으로 주면 됨
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 셀렉트 박스 사이의 항목이동 및 순서변경 (0) | 2012.02.09 |
|---|---|
| 순서변경 스크립트 (0) | 2012.02.09 |
| 이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3) (0) | 2011.05.20 |
| [스크립트] Prototype + jQuery + Sly 를 적절히 섞어 쓰기 (0) | 2010.11.09 |
| 체크 박스나 라디오 버튼의 모두 선택/해제 스크립트 (0) | 2010.04.24 |