jquery validator 플러그인 사용해서 Form 검증하기.

< jQuery Validation Plugin >

http://jqueryvalidation.org/

< jQuery Form Validation before Ajax submit >

http://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit

< 사용 라이브러리 >

jquery-1.10.2.js

jquery-validation-1.11.1

form 을 submit 하는 것이 아니라 ajax 를 이용해서 통신할 때도 jquery validator 플러그인을 이용하고 싶었다.

위 웹페이지(stackoverflow.com)의 내용이 모두 맞는 것은 아니고, 힌트를 얻을 수 있었다.

위 웹페이지에 나온 대로 form 을 submit 하고, jquery validator 플러그인을 사용할 때 submitHandler 안에서 ajax 를 호출하고, $('#form').submit() 을 안해도 될 것 같다. 그런데, 실제로 form 을 submit 하는 것이 아닌데, submit 하도록 코드를 만드는게 좀 찝찝해서 다른 방법으로 했다.

if($("#form").validate()) {

 return true;

} else {

 return false;

}

참고한 웹페이지에는 이렇게 나와 있는데, 실제로 이렇게 하면 안되고, 

$('#form').valid() 로 check 해야한다. 

참고로, 에러를 체크하는 순서는 rules 나 messages 에 정의된 순서로 하는 것이 아니라, form 안에서 정의된 순서대로 한다.

/**
 * 작 성 자 : 강희석
 * 작성일자 : 2013.10.18.
 * 설    명 : Validator 초기화 설정
 */
if((typeof $.validator) != "undefined" ) {
	$(function() {
		$.validator.setDefaults({
				onkeyup:false,
				onclick:false,
				onfocusout:false,
				showErrors:function(errorMap, errorList){
					if(this.numberOfInvalids()){
						alert(errorList[0].message);
					}
				},
				ignore: ":file"
		});
		$.validator.addMethod("YCheck", function(value, element) {
			if(gfIsEmpty(element.value) || element.value != "Y"){
				return false;
			} else {
				return true;
			}
		});
		$.validator.addMethod("PositiveInteger", function(value, element) {
			if( value != parseInt(value,10) || value < 0 ) {
				return false;
			} else {
				element.value = parseInt(value,10); // 01 => 1
				return true;
			}
		});
	});
}

[참고] 전화번호 처럼 0-9 까지의 숫자만 필요한 경우, number : true 로 하면 음수와 소수점도 허용되므로, digits : true 로 rules 를 정의하면 된다. ( http://jqueryvalidation.org/digits-method/ )

비밀번호 확인의 경우 비밀번호 입력란의 값과 같아야 하는 규칙의 경우, equalTo: "#password" 라는 규칙을 사용하면 된다. (비밀번호 입력란의 id 가 "password" 인 경우)

그 외에 rules 나 messages 에서 일반적으로 참고하는 값은 form 안의 control 태그의 name 값이다.

위의 $.validator.setDefaults 안에서 showErrors 를 위와 같이 정의하면 웹페이지 화면에 메시지가 표시되는 대신에 맨 먼저 체크된 오류 메시지를 alert 로 띄운다.

웹페이지 화면에도 표시하고, submit 버튼을 누를 때, alert 창으로도 표시되도록 하기 위해서는...

isSubmitted Flag를 하나 만들어서 Submit 버튼을 누를 때 true가 되게 해주고, showErrors function 안에서 this.defaultShowErrors() 를 호출해 주면 된다. 코드는 다음과 같다.

<script type="text/javascript">/*<![CDATA[*/
	var isSubmitted = false;

	if((typeof $.validator) != "undefined" ) {
		$(function() {
			$.validator.setDefaults({
				showErrors:function(errorMap, errorList){
					if( isSubmitted ) {
						isSubmitted = false;
						if(this.numberOfInvalids()){
							alert(errorList[0].message);
						}
					}
					this.defaultShowErrors();
				},
				ignore: ":file"
			});
		});
	}

	//**********************************************************************************
	// 프로젝트 등록 전 확인
	//**********************************************************************************
	function fnAskRegister() {
		isSubmitted = true;
		if ($("#frmProjectInfo").valid()) {
			gfMsgBox("Will you register this project?", "Confirmation", true, true, fnRegister);
		}
	}

	/*]]>*/
</script>

[참고] http://stackoverflow.com/questions/285428/how-to-display-jquery-validation-error-container-only-on-submit