Form Sample - with Validation

문의 하기

이름 #
우편번호
-
이메일
이메일(확인)
성별#
사이트 정보를 얻은 곳은 어디입니까?#
문의 내용#



유효성 검증 소스

							$(document).ready(function(){				
								$("form").submit(function () {
									// 에러 초기화
									$("p.error").remove();
									$("dl dd").removeClass("error");

									$(":text, textarea").filter(".validate").each(function () {
										
										// 필수 항목 체크
										$(this).filter(".required").each(function () {
											if ($(this).val() == "") {
												$(this).parent().prepend("

필수 항목입니다.

"); } }); // END 필수 항목 체크 // 숫자 체크 $(this).filter(".number").each(function () { if (isNaN($(this).val())) { $(this).parent().prepend("

숫자만 입력할 수 있습니다.

"); } }); // END 숫자 체크 // 이메일 체크 $(this).filter(".mail").each(function () { if ($(this).val() && !$(this).val().match(/.+@.+\..+/g)) { $(this).parent().prepend("

올바른 이메일 주소가 아닙니다.

"); } }); // END 이메일 체크 // 이메일 확인 $(this).filter(".mail_check").each(function () { if ($(this).val() && $(this).val() != $("input[name="+$(this).attr('name').replace(/^(.+)_check$/, '$1')+"]").val()) { $(this).parent().prepend("

이메일 주소가 일치하지 않습니다.

"); } }); // END 이메일 확인 }); // END :text, textarea // 라디오 버튼 체크 $(":radio").filter(".validate").each(function () { $(this).filter(".required").each(function () { if ($("input[name="+$(this).attr('name')+"]:checked").size() == 0) { $(this).parent().prepend("

선택해 주십시오.

"); } }); }); // END 라디오 버튼 체크 // 체크 박스 체크 $(".checkboxRequired").each(function () { if ($(":checkbox:checked", this).size() == 0) { $(this).prepend("

선택해 주십시오.

"); } }); // END 체크 박스 체크 // 그외의 필수 항목 체크 $(".validate.add_text").each(function () { if ($(this).attr('checked')==true && $("input[name="+$(this).attr('name').replace(/^(.+)$/, '$1_text')+"]").val() == "") { $(this).parent().prepend("

그 외의 필수 항목을 입력해 주십시오.

"); } }); // END 그외의 필수 항목 체크 // 에러일 경우 처리 if ($("p.error").size() > 0) { $('html, body').animate({ scrollTop: $("p.error:first").offset().top - 40 }, 'slow'); $("p.error").parent().addClass("error"); return false; } // END 에러일 경우 처리 }); // END form.submit() }); // END ready()

유효성 검증 코드 항목별

submit()

							$("form").submit(function() {
								// 폼 validation 내용

								// 에러 초기화
								$("p.error").remove();
								$("dl dd").removeClass("error");

							});
						

submit 이벤트는 송신 버튼(type속성이 'submit'인 input 태크)을 클릭했을 때 발생하는 이벤트입니다.
submit 이벤트 처리에서는 처음에 에러를 초기화합니다. 송신 버튼이 처음 눌렸을 때는 관계 없습니다만 이미 버튼이 눌린 후 validation 처리가 끝난 경우에는 validation 에러일 때의 처리가 적용되어 있는 경우가 있습니다. 그렇게 되면 에러 메시지가 몇 번이고 추가된다거나 이미 형식에 맞게 수정한 항목의 에러 메시지도 사라지지 않게 되는 문제가 발생하게 되므로 가장 처음에 초기화를 해두어야 합니다. removeClass()로 "error" class 속성을 제거하고 remove()로 에러 메시지(p 태그)를 제거합니다.