jQuery Validation Engine 적용해봤어요
jQuery Validation Engine
1) validation js
2) validation 메시지 js
3) css
를 걸어놓고
<input type="text" ..... class="validate[required,maxSize[40]]"> 과 같은 코딩을 하면
유효성 체크를 해주는 jquery 를 사용한 validation library 다.
jQuery 사이트에 있는 validation plugin 보다 깔끔한 거 같아서 이 놈을 쓰기로 했다.
메시지 js를 수정해서 한글 메시지로 보이게 할 수 있다.
코드를 다 적용해놓아도 안먹어서 삽질 좀 했다. 혹시 jqgrid 와 쫑나서 그러나 했는데 그건 아니었다.
var jq = jQuery.noConflict(); 라는 코드를 없애니 잘 됨.
다른 라이브러리는 쓰지 않고... 요 라이브러리만 두어도 위 코드가 들어가면 먹질 않음...
jqgrid 쓸땐 저 코드가 있어도 $, jq 모두 다 인식되었었는데...
noConflict api 쪽을 보아도 겪은 상황과 연결되어 이해가 안됨.
$(document).ready(function(){
// VALIDATION INIALIZE
$("#" + formId0 ).validationEngine();
});
이 코드만 해두면 object blur 시에 유효성 메시지를 보여주고, input submit 동작시에도 걸림.
(나는 예전부터 submit 은 안쓰고 일반버튼으로 submit 시킴)
---------------------------------------------------------------------
$('#btnSave').click(function(){
if( fValid(formId0) == false ) return;
............
저장버튼 클릭 이벤트 처리
---------------------------------------------------------------------
function fValid(inFormId){
// CUSTOM ---------------------------------------
// BY VALIDATION ENGINE ---------------------------------------
if( $("#" + inFormId).validationEngine('validate') == false )
{
return false;
}
else
{
return true;
}
}
유효성 체크 함수. 혹시 별도로 체크할거 있으면 여기 끼워넣으면 됨.
따로 유효성 체크로직을 만들 경우 validation engine의 js를 수정해도 되지만
가능한 원 라이브러리는 그대로 두기위해 건들지 않음. (예를 들어 libarary 업그레이드를 하는 경우도 있을수 있으니... )
※ jQuery Validation Engine --- URL
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
https://github.com/posabsolute/jQuery-Validation-Engine
Demo : http://www.position-relative.net/creation/formValidator/
※ jQuery 사이트에 있는 validation plugin
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Demo : http://jquery.bassistance.de/validate/demo/
* 참고할만한 블로그 글
http://mytory.co.kr/archives/195