참조 : http://docs.jquery.com/Plugins/Validation
폼필드를 만들다보면 종종 return false 를 써내려가며 폼값을 입력했는지, 제대로 입력하긴 했는지,
디비 내용과 중복인지 등등을 검토해야 하는 귀찮은 시나리오를 만나는 경우가 많은데요
이때 참 쓸만한 녀석이 바로 jQuery의 Validation 플러그인입니다.
jQuery Vlidation은 각각의 폼필드가 갖고 있는 name 태그를 인식하여
값이 입력되었는지, 최소입력글자 이상을 입력하였는지, 이메일형식의 필드를 올바르게 써넣었는지 등을
간편하게 체크할 수 있도록 만든 라이브러리 같은 놈인데요,
특히 회원가입 페이지 같은 것을 만들때 "아이디 중복여부 확인" 등의 경우에 있어서는,
유저가 "중복체크버튼" 을 안누르고도 체크가 가능하도록 php 파일과의 연동 또한 쉽게 지정할 수 있습니다.
플러그인을 연동한 이후의 기본적인 명령은 위의 한줄로부터 출발합니다.
실전에서 쓰는 예제로는 제가 예전에 작업했던 소스를 참고해 주세요..
기업용 회원가입 페이지를 만들기 위해 작성했던 것인데요..
에러메세지를 개별적으로 설정해줄수도 있으며, 위에 잠깐 언급했던 "db연동후 중복체크" 와 같은 기능은
remote 라는 명령을 통해 사용할 수 있게 됩니다.
Validate 를 통해 모든 폼필드의 값들이 이상없이 ok가 되었다면
스크립트는 submitHandler 를 실행하게 될 것이고, 에러가 있다면 errorPlacement 를 실행하겠죠..
submit이 완벽하게 끝났다면 success 펑션을 통해 결과멘트를 보내거나,
가입완료페이지로 리다이렉트를 시킬 수도 있습니다.
jQuery 가 맨처음 다가가기엔 좀 거부감이 있어도, 한달만 적응하면 이거만큼 좋은넘이 정말 없는듯.. ;;
폼필드를 만들다보면 종종 return false 를 써내려가며 폼값을 입력했는지, 제대로 입력하긴 했는지,
디비 내용과 중복인지 등등을 검토해야 하는 귀찮은 시나리오를 만나는 경우가 많은데요
이때 참 쓸만한 녀석이 바로 jQuery의 Validation 플러그인입니다.
jQuery Vlidation은 각각의 폼필드가 갖고 있는 name 태그를 인식하여
값이 입력되었는지, 최소입력글자 이상을 입력하였는지, 이메일형식의 필드를 올바르게 써넣었는지 등을
간편하게 체크할 수 있도록 만든 라이브러리 같은 놈인데요,
특히 회원가입 페이지 같은 것을 만들때 "아이디 중복여부 확인" 등의 경우에 있어서는,
유저가 "중복체크버튼" 을 안누르고도 체크가 가능하도록 php 파일과의 연동 또한 쉽게 지정할 수 있습니다.
$("#commentForm").validate();
플러그인을 연동한 이후의 기본적인 명령은 위의 한줄로부터 출발합니다.
실전에서 쓰는 예제로는 제가 예전에 작업했던 소스를 참고해 주세요..
$("#signupform").validate({
rules: {
agree:{required: true},
userid:{required: true,minlength: 4,remote: "lib/join_id.php"},
password:{required: true,minlength: 6},
password_confirm:{required: true,equalTo: "#password"},
comp_k:{required: true},
bizcode:{required: true,minlength: 12,remote: "lib/join_bizcode.php"},
ceo_k:{required: true},
tel:{required: true},
url:{required: true},
address:{required: true},
est:{required: true},
prp:{required: true},
clerk_k:{required: true},
clerk_cel:{required: true},
clerk_mail:{required: true,email: true,remote: "lib/join_email.php"},
cel_ok:{required: true},
mail_ok:{required: true}
},
messages: {
agree: {
required: ""
},
userid: {
required: "아이디를 입력하세요",
minlength: jQuery.format("최소 {0}자 이상 입력하세요"),
remote: "이미 등록된 아이디입니다"
},
password: {
required: "비밀번호를 입력하세요",
minlength: jQuery.format("최소 {0}자 이상 입력하세요")
},
password_confirm: {
required: "비밀번호를 재입력하세요",
equalTo: "비밀번호가 동일하지 않습니다"
},
comp_k: {
required: "회사명을 입력하세요"
},
bizcode: {
required: "사업자 등록번호를 입력하세요",
minlength : "사업자 등록번호를 올바르게 입력하세요",
remote: "이미 등록된 번호입니다"
},
ceo_k: {
required: "대표자명을 입력하세요"
},
tel: {
required: "전화번호을 입력하세요"
},
url: {
required: "홈페이지주소를 입력하세요"
},
address: {
required: "사업장 주소지를 입력하세요"
},
est: {
required: "설립년도를 입력하세요"
},
prp: {
required: "취급품목을 입력하세요"
},
clerk_k: {
required: "담당자명을 입력하세요"
},
clerk_cel: {
required: "휴대폰번호를 입력하세요"
},
clerk_mail: {
required: "담당자이메일을 입력하세요",
remote: "이미 등록된 메일입니다",
email: "메일주소를 올바르게 입력하세요"
},
cel_ok: {
required: "문자알림서비스에 동의해주세요"
}
},
errorPlacement: function(error, element) {
if ( element.is(".input_j2") )
error.appendTo ( element.next().next() );
else
error.appendTo( element.next() );
},
submitHandler: function() {
$.css({cursor:"wait"});
$('#signupform').submit();
},
success: function(element) {
}
});
rules: {
agree:{required: true},
userid:{required: true,minlength: 4,remote: "lib/join_id.php"},
password:{required: true,minlength: 6},
password_confirm:{required: true,equalTo: "#password"},
comp_k:{required: true},
bizcode:{required: true,minlength: 12,remote: "lib/join_bizcode.php"},
ceo_k:{required: true},
tel:{required: true},
url:{required: true},
address:{required: true},
est:{required: true},
prp:{required: true},
clerk_k:{required: true},
clerk_cel:{required: true},
clerk_mail:{required: true,email: true,remote: "lib/join_email.php"},
cel_ok:{required: true},
mail_ok:{required: true}
},
messages: {
agree: {
required: ""
},
userid: {
required: "아이디를 입력하세요",
minlength: jQuery.format("최소 {0}자 이상 입력하세요"),
remote: "이미 등록된 아이디입니다"
},
password: {
required: "비밀번호를 입력하세요",
minlength: jQuery.format("최소 {0}자 이상 입력하세요")
},
password_confirm: {
required: "비밀번호를 재입력하세요",
equalTo: "비밀번호가 동일하지 않습니다"
},
comp_k: {
required: "회사명을 입력하세요"
},
bizcode: {
required: "사업자 등록번호를 입력하세요",
minlength : "사업자 등록번호를 올바르게 입력하세요",
remote: "이미 등록된 번호입니다"
},
ceo_k: {
required: "대표자명을 입력하세요"
},
tel: {
required: "전화번호을 입력하세요"
},
url: {
required: "홈페이지주소를 입력하세요"
},
address: {
required: "사업장 주소지를 입력하세요"
},
est: {
required: "설립년도를 입력하세요"
},
prp: {
required: "취급품목을 입력하세요"
},
clerk_k: {
required: "담당자명을 입력하세요"
},
clerk_cel: {
required: "휴대폰번호를 입력하세요"
},
clerk_mail: {
required: "담당자이메일을 입력하세요",
remote: "이미 등록된 메일입니다",
email: "메일주소를 올바르게 입력하세요"
},
cel_ok: {
required: "문자알림서비스에 동의해주세요"
}
},
errorPlacement: function(error, element) {
if ( element.is(".input_j2") )
error.appendTo ( element.next().next() );
else
error.appendTo( element.next() );
},
submitHandler: function() {
$.css({cursor:"wait"});
$('#signupform').submit();
},
success: function(element) {
}
});
기업용 회원가입 페이지를 만들기 위해 작성했던 것인데요..
에러메세지를 개별적으로 설정해줄수도 있으며, 위에 잠깐 언급했던 "db연동후 중복체크" 와 같은 기능은
remote 라는 명령을 통해 사용할 수 있게 됩니다.
Validate 를 통해 모든 폼필드의 값들이 이상없이 ok가 되었다면
스크립트는 submitHandler 를 실행하게 될 것이고, 에러가 있다면 errorPlacement 를 실행하겠죠..
submit이 완벽하게 끝났다면 success 펑션을 통해 결과멘트를 보내거나,
가입완료페이지로 리다이렉트를 시킬 수도 있습니다.
jQuery 가 맨처음 다가가기엔 좀 거부감이 있어도, 한달만 적응하면 이거만큼 좋은넘이 정말 없는듯.. ;;
