보통 웹 프로젝트에서 폼전송을 하기전 필수값 혹은 검증을 하는 절차를 거친다음 DATA SUBMIT을 해줍니다.

보통 ALERT창으로 'XXX값을 입력하세요'라는 형태로 경고창을 띄운 후 return으로 막습니다.

이번에 소개할 jQuery Validation 은 폼 submit 전에 검증을 해주는 플러그인입니다.

jQuery Validation을 사용하면 검증을 통과하지 못할 경우 

통과 못한 폼태그 하단에 경고문구를 출력시키고 자동으로 submit을 방지해줍니다.

이 기능을 구현해보기 위해서 연동을 해보도록 하겠습니다.

우선 validation 플러그인제공 URL로 접속을 합니다.

http://jqueryvalidation.org

받으셨다면 하단 영역에 Download버튼을 클릭하여 파일을 다운로드 받도록 합니다.

다운로드를 받으셨다면 

압축해제후 dist 디렉토리에 존재하는 additional-methods.min.js 와 jquery.validate.min.js 

그리고 localization 디렉토리내에 messages_ko.min.js 파일을

 웹프로젝트 경로에 INCLUDE 하도록 합니다.

※ min파일말고 일반 js파일들을 include해주셔도 상관없습니다

저는 그냥 용량 적은파일을 선택한것 뿐...

jquery.validate : 검증플러그인 (필수)

additional-methods : 미리 정의된 일부검증 메서드 (선택)

messages_ko : 검증실패시 출력되는 오류에대한 한국어 문구지원(선택)

첫번째로 필수값 체크하는 부분에 대해서 다루어 보도록 하겠습니다.

INCLUDE해야 할 파일

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="additional-methods.min.js"></script>
<script type="text/javascript" src="messages_ko.min.js"></script>

다음으로는 폼검증을 위한 HTML파일코드입니다.

검증을 위한 HTML 코드

<form action=""> 
	<input type="text" name="txt1" required="required"/><br/>
	<input type="text" name="txt2" /><br/>
	<input type="text" name="txt3" required="required"/><br/>
	<input type="text" name="txt4" required="required"/><br/>
	<input type="submit"  value="저장" />
</form>

이어서 자바스크립트 코드입니다.

JAVASCRIPT CODE

$(function(){
	$("form").validate();
})

위에 대한 사용이 제일 기본코드 양식입니다.

원래 input 태그들의 required="required" 속성은 HTML5의 속성으로 크롬/사파리/파이어폭스 등에는  대부분 지원이 가능하지만 

IE의 경우는 10이상에서만 지원이 가능한 속성이므로 모든 브라우저 호환을 위해서 현재는 validation 플러그인을 사용하시면 

좋을거 같습니다.

※ validate 함수를 사용하여 form태그안에 들어있는 태그검증을 위해서는 태그들마다 name값은 필수

위 코드 기준으로 실행결과를 확인해 보도록 하겠습니다.

실행결과

위와같이 태그의 required 속성을 준 태그에 대해서는 

빈값으로 submit 전송시 "필수 항목입니다."라는 문구가 출력되는것을 

확인하였습니다.

프로젝트에서 검증을 할때는 

글자수 체크를 하거나 

ajax체크를해서 중복값인지등

다양한 방법도 존재합니다.

validation 플러그인은 규칙까지 별도로 만드는 기능까지 제공해주니 정말 좋은거 같습니다.

그럼 이제 자신만의 규칙을 만들어서 검증하는 코드를  회원가입예를들어 작성해보도록 하겠습니다.

이번코드에서는 INCLUDE한 파일들중 additional-methods, messages_ko JS파일을 제거합니다.

미리 정의되어있는 규칙들을 사용하면 좋지만 영문 + 한국어에 대한 정보가 몇 없어서 직접 규칙을 만들어서 적용을 하겠습니다.

규직작성에 필요한 validate의 속성은

"rules"라는 규칙정의하는 부분과 "

messages"라는 검증실패일 경우 화면에 띄워줄 문구내용의 

속성이 필요합니다.

기본적으로 회원가입예제 HTML 코드를 작성해보도록 하겠습니다.

회원가입 html코드

<form action="/test.jsp" id="frm">
	아이디 : <input type="text" name="id" id="id"/><br/>
	비밀번호 : <input type="password" name="password" id="password"/><br/>
	비밀번호확인 : <input type="password" name="repassword" id="repassword"/><br/>
	나이 :  <input type="text" name="age" id="age"/><br/>
	이름 : <input type="text" name="name" id="name"/><br/>
	이메일 : <input type="text" name="email" id="email"/><br/>
	홈페이지 : <input type="text" name="homepage" id="homepage"/><br/>
	<input type="submit" value="회원가입" />
</form>

validate 함수를 사용하시기 위해서는 name값을 설정해주셔야하고 

rules라는 규칙정의를 위해서는 id값을 설정해주셔야 하는거 같습니다.

각각의 검증을 위하여 스크립트코드를 다음처럼 작성해보았습니다.

Validation 검증 스크립트 코드

$(function(){
		$("form").validate({
			//validation이 끝난 이후의 submit 직전 추가 작업할 부분
			submitHandler: function() {
				var f = confirm("회원가입을 완료하겠습니까?");
				if(f){
					return true;
				} else {
					return false;
				}
			},
			//규칙
			rules: {
				id: {
			    	required : true,
			    	minlength : 5,
			    	remote: "/check_id.jsp"
			    },
			    password: {
			    	required : true,
			    	minlength : 3
			    },
			    repassword: {
			    	required : true,
			    	minlength : 3,
			    	equalTo : password
			    },
			    name: {
			    	required : true,
			    	minlength : 2
			    },
			    age: {
			    	digits : true
			    },
			    email: {
			    	required : true,
			    	minlength : 2,
			    	email : true
			    },
			    homepage: {
			    	url : true
			    }
			},
			//규칙체크 실패시 출력될 메시지
			messages : {
				id: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다",
			    	remote : "존재하는 아이디입니다"
			    },
			    password: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다"
			    },
			    repassword: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다",
			    	equalTo : "비밀번호가 일치하지 않습니다."
			    },
			    name: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다"
			    },
			    age: {
			    	digits : "숫자만입력하세요"
			    },
			    email: {
			    	required : "필수로입력하세요",
			    	minlength : "최소 {0}글자이상이어야 합니다",
			    	email : "메일규칙에 어긋납니다"
			    },
			    homepage: {
			    	url : "정상적인 URL이 아닙니다"
			    }
			}
		});
})

별도로 id 검증부분에 remote라는 속성이 존재합니다.

이 부분은 ajax를 통해서 입력값을 서버페이지로 전달하여 

true/false 결과값을 받아서 검증하는 방식입니다.

임의의 remote이해를 돕기위한 check_id.jsp 샘플코드

if(request.getParameter("id").equals("test123")){
	out.print(false);
} else {
	out.print(true);
}

최종 SUBMIT 페이지인 test.jsp 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 회원가입이 완료되었습니다.
</body>
</html>

위의 로직흐름을 적어보자면

1. 페이지 로딩

2. 각 입력태그들의 검증절차 진행

    id의 경우에는 기본 검증들이 마친 후 다른 입력폼으로 넘어갈경우 remote ajax call이 이루어짐 

    (false일 경우 messages 속성의 id -> remote 문구 출력)

3. submitHandler 적용하지 않을시 submit 처리 진행 

    submithandler에서 ajax로 submit로 가능하며 또다른 작업을 진행이 가능합니다.

실행결과를 확인하도록 하겠습니다.

Validation 폼검증 실행결과

위와같이 간단하게 validation 플러그인을 사용하여 폼 검증을 해보았습니다.

by 개발로짜

이번에 소개하고자 하는 플러그인은 BlockUI라는 jQuery플러그인입니다.

레이어 팝업만들기에 유용한 플러그인이랍니다~

하단 링크를 통해서 다운로드 받으실 수 있습니다.

다운로드 : https://github.com/malsup/blockui/

우측을보시면 Download ZIP이라는 버튼이 있는데 클릭합니다.

압축해제후 jquery.blockUI.js 이란 파일을 프로젝트 경로에 넣어줍니다.

위와같은 구조로 예를 들기위해 js파일을 root 경로에 위치하였습니다.

blockUI는 레이아웃팝업을 쉽게지원해주는 플러그인이기도 하며 

AJAX 호출하는동안 화면을 보호하기 위한 목적에도 사용이 됩니다.

호출명령어는 

//BLOCKUI 화면 출력
$.blockUI({//속성추가});
//BLOCKUI 화면 제거
$.unblockUI();

입니다.

레이어 팝업에 표출시킬 경우 보여주고자 하는 태그들은 message 속성에 정의를 해주거나 body 태그내에 레이아웃을 제작한 다음 display:none; 속성을 style 속성에 정의를 해준 후 해당 레이아웃을 불러올수도 있습니다.

또한 css속성을 이용하여 레이어팝업의 스타일을 별도로 지정하는것이 가능합니다.

그리고 전체 화면에 레이어팝업을 띄울뿐만 아니라 특정 엘리먼트 영역에 레이어팝업을 띄워주게도 지원을 합니다.

1. 전체 화면에 blockUI적용

2. 일부 엘리먼트영역에 blockUI적용

3. blockUI 영역에 별도의 CSS 적용

이 3가지를 다루어 보도록 하겠습니다.

전체 화면을 blockUI 감싸기

blockUI 플러그인을 사용하기 위해서는 jQuery include는 필수겠죠? 

저는 CDN을 이용하여 jQuery 를 사용하도록 하겠습니다.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>

버튼 클릭하여 모달창을 띄운 후 모달창에 존재하는 닫기 버튼을 클릭하여 모달을 제거하도록 해보겠습니다.

HTML 코드

<input type="button" id="openmodal" value="모달띄우기"/>

자바스크립트 코드

$(function(){
	$("#openmodal").click(function(){
		$.blockUI({message : "<input type='button' value='모달닫기' onclick='removeModal()' />"})
	})
})
function removeModal(){
	$.unblockUI();
}

코드작성이 완료 되셨다면 실행을 해보도록 하겠습니다.

전체화면 감싸는 BLOCKUI 실행결과

브라우저전체를 어두운 바탕으로 감싼다음 중앙에 닫기 버튼이 생성되었고 

닫기버튼을 클릭하여 모달창을 사라지게 하였습니다.

특정 엘리먼트를 blockUI로 감싸기

다음은 특정 엘리먼트 내에만 모달창을 띄워보도록 하겠습니다.

특정 엘리먼트영역에 모달창을 띄우고 사라지게 하는 함수는 다음코드를 적용해주셔야 합니다.

//엘리먼트내에 BLOCKUI 화면 출력
$("selector").block(//option);
//엘리먼트내에 BLOCKUI 화면 제거
$("selector").unblock();

blockUI함수대신 block함수를 

unblockUI대신 unblock 함수를

 사용하면됩니다.

 앞에 셀렉터를 적용해주시면 되겠습니다.

HTML코드

<input type="button" id="openmodal" value="모달띄우기"/>
<br/>
<div id="blocklayer">여기만<br/>모달창으로 감쌉니다</div>

자바스크립트코드

$(function(){
	$("#openmodal").click(function(){
		$("#blocklayer").block({message : "<input type='button' value='모달닫기' onclick='removeModal()' />"})
	})
})
function removeModal(){
	$("#blocklayer").unblock();
}

특정엘리먼트를 감싸는 BLOCKUI 실행결과

마지막으로 css 속성을 이용하여 모달의 스타일을 변경해보도록 하겠습니다.

코드는 다음과같이 작성하시면 되겠습니다.

$("셀렉터").block({
	message : "모달에 출력할 메시지",   
	css: { 
		border: '3px solid #a00'
	} 
})
//또는
$.blockUI({
	message : "모달에 출력할 메시지",   
	css: { 
		border: '3px solid #a00'
	}
})

전체페이지에 적용할지 혹은 특정 엘리먼트레이아웃에 적용할지로 나누었지만 

실제 속성 적용은 모두 동일합니다.

그럼 유용하게 사용하세요~

by 개발로짜

ExtJS 기준 패널과 같은 도화지 역할을 하는 껍데기에 상하좌우 모든 위치에 툴바적용이 가능합니다.

이번 포스팅은 패널에 툴바를 위치별로 생성하는 법을 알아보고 추가로 생성된 툴바에 자주 사용되는 

버튼들을 생성해본 후 클릭이벤트를 적용해보도록 하겠습니다.

패널 도화지를 만드는 방법은 레이아웃만들 때 다루어 보았습니다.

panel에 툴바를 만드는 속성은 tbar/lbar/rbar/fbar/bbar속성을 이용하면 쉽게 위치별로 만드는것이 가능합니다. 

추가로 dockedItems라는 속성으로도 툴바생성이 가능합니다.

ExtJS사이트의 샘플에서는 dockedItems를 주로 사용하여 툴바를 만들어줍니다만 

이번 포스팅에서는 위의 5가지 속성으로만 툴바를 만들어보도록 하겠습니다.

tbar : tab bar를 의미하며 도화지영역 컨텐츠 내용 상단에 위치

lbar : left bar를 의미하며 도화지영역 컨텐츠 내용 좌측에 위치

rbar : right bar를 의미하며 도화지영역 컨텐츠 내용 우측에 위치

bbar : bottom bar를 의미하며 도화지영역 컨텐츠 내용 하단에 위치

fbar : footer barf를 의미하며 bbar와 동일한 위치인 하단에 놓이지만 툴바의 배경 및 UI가 다릅니다.

다음 코드를 보시겠습니다.

패널에 툴바 적용하기 샘플코드

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
		renderTo : Ext.getBody(),
		width: 500,
	    height: 400,
	    title : '도화지의 타이틀영역',
	    html : '도화지의 컨텐츠영역',
	    //해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능
	    bbar : [{
	    	xtype : 'button',
	    	text : '버튼1'
	    },{
	    	xtype : 'button',
	    	text : '버튼2'
	    }]
	});
})

하단에 위치시킬 bottom bar속성을 주고 xtype이 button인 컴포넌트 2개를 생성하여 위치시켜 보았습니다.

여기서 xtype은 전에 말씀드렸던것처럼 <input type=""/> 와 비슷한 개념으로

ExtJS만의 html태그라고 생각하시면 되겠습니다.

bbar(bottom toolbar)코드 실행결과

하단에 bbar 속성이 적용되여 버튼컴포넌트들이 생성이 되었습니다.

상단 코드중 bbar 라는 key값을 lbar/rbar/tbar/fbar 등을 적용하여 각각의 위치 및 결과를 확인하겠습니다.

fbar(footer toolbar)코드 실행결과

Crisp 테마 기준으로 bbar와 같은 하단 영역이더라도 fbar버튼이 조금 더 깔끔한거 같네요. 

tbar(tabbar toolbar)코드 실행결과

lbar(left toolbar)코드 실행결과

rbar(right toolbar)코드 실행결과

위치별로 생성된 툴바를 알아보았습니다.

json의 key/value를 이용만을 해서 컴포넌트를 생성한다는것이 심플하지 않으신가요??

 저...저만 그런가요??;;;

테마별로 툴바의 디자인이 다르니 마음에 드시는 방법으로 작업하시면 되겠습니다.

2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편

다음은 버튼컴포넌트 클릭시 동작하는 클릭이벤트를 알아보겠습니다.

이전포스팅에 Card Layout 예를 들었을때 handler라는 속성을 보셨을 겁니다.

2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)

보통 이벤트 발생시, listeners라는 속성으로 이벤트 핸들링을 해줍니다.

버튼컴포넌트 역시 이 리스너속성을 지원해주지만 

이번장에서는 리스너대신 핸들러속성을 사용하도록 하겠습니다.

리스너의 경우는 추후에 포스팅 하도록 하겠습니다.

버튼컴포넌트에 클릭이벤트를 지원해주는것이 handler입니다.

handler 내에서 이제 json객체를 사용하는것이 아닌 내부적으로 일반 자바스크립트 코드 적용이 가능합니다.

미리 정의한 툴바에 '버튼1'이라는 문구를 가진 컴포넌트에 클릭이벤트를 발생시켜 

ExtJS에서 제공하는 ALERT 위젯을 띄워보도록 하겠습니다.

버튼클릭이벤트 관련 샘플코드

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
		renderTo : Ext.getBody(),
		width: 500,
	    height: 400,
	    title : '도화지의 타이틀영역',
	    html : '도화지의 컨텐츠영역',
	    //해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능
	    bbar : [{
	    	xtype : 'button',
	    	text : '버튼1',
	    	handler : function(btn){
	    		Ext.Msg.alert('버튼클릭', '안녕버튼1?');
	    	}
	    },{
	    	xtype : 'button',
	    	text : '버튼2'
	    }]
	});
})

버튼클릭 이벤트 실행결과

툴바와 버튼 클릭이벤트에 대해서 알아보았습니다.

by 개발로짜