jquery 유효성 검사 사용 가이드 4단계_jquery

기본적으로 확인 프롬프트 정보는 label 요소를 사용하여 표시되며 CSS 클래스가 추가되어 있어 오류 제어 및 오류 메시지 표시 방법을 쉽게 설정할 수 있습니다.

/* 입력 제어 유효성 검사 오류*/
form input.error { border:solid 1px red;}

/* 유효성 검사 오류 메시지*/
form label.error { width: 200px; margin-left: 10px; color: Red;}

표시 방법을 맞춤설정하려면 jquery.validate의 기본 표시 방법을 수정할 수 있습니다.

기본적으로 라벨은 오류 메시지를 표시하는 데 사용되며 errorElement 속성
errorElement: html 오류 메시지

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

오류 메시지 외부의 다른 요소로 레이어를 래핑할 수 있습니다.
wrapper: 오류 메시지의 외부 캡슐화 html 태그

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

유효성 검사 오류에 대한 기본 CSS 클래스는 error이며, errorClass를 통해 수정할 수 있습니다.
errorClass: 오류를 확인할 때 사용되는 CSS 클래스

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

확인 성공 시 작업도 맞춤설정
성공: 값이 문자열이면 CSS 클래스로 처리되고, 함수이면 함수가 실행됩니다

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

또는

success: function (label) {
label.html (" ").addClass("checked");
}

표시를 위해 오류 메시지를 하나의 컨테이너로 통합할 수도 있습니다
errorLabelContainer: 오류 통합 메시지를 하나의 컨테이너에 넣어 표시합니다

$("#myform").validate({
errorLabelContainer: "#messageBox"
})

기본적으로 오류 메시지는 다음과 같습니다. 유효성 검사 요소 뒤에 배치되며 오류는 사용자 정의할 수 있습니다. 메시지 표시 위치

$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next ("td") );
}
})

또한 여러 오류 정보를 넣을 그룹을 정의할 수 있습니다. 한 곳에 배치하고 오류 배치 제어를 사용하여
groups: 정의 a 그룹

$(".selector").validate({
groups: {
에 오류 정보를 입력합니다. 사용자 이름: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name" ) == "lname" )
error.insertAfter( "#lastname");
else
error.insertAfter(element)
}
})

강조
highlight: 강조 표시, 기본값은 errorClass를 추가하는 것입니다.
unhighlight: 강조 표시, 강조 표시 방지에 해당

$(".selector").validate({
highlight: function(element , errorClass) {
$(element) .addClass(errorClass);
$(element.form).find("label[for=" element.id "]").addClass(errorClass)
},
강조 해제: function(element , errorClass) {
$(element).removeClass(errorClass)
$(element.form).find("label[for=" element.id " ]").removeClass(errorClass);
}
});


또는 오류 표시를 완전히 사용자 정의할 수 있습니다
showErrors: 오류 표시 핸들 가져오기

$(".selector").validate( {
showErrors: function(errorMap, errorList) {
$("#summary").html("양식에 " this.numberOfInvalids()가 포함되어 있습니다.
" 오류, 자세한 내용은 아래를 참조하세요.");
this.defaultShowErrors()
}
})