'코드저장소/jQuery 플러그인' 카테고리의 글 목록 IT Code Storage

/83

2014. 11. 10. 20:05

jqGrid 플러그인을 이용하여 그리드 연동 및 목록 출력시켜보기 + ajax 페이징 포함

이번포스팅은 jqGrid를 다운로드하여 연동 및 그리드 목록에

데이터 출력시키는 방법에 대하여 알아보고자 합니다.

jqGrid의 경우 jQueryUI의 테마를 사용하기 때문에

jQueryUI를 다운 및 연동을 우선적으로 연동한 후에

jqGrid 다운을 받도록 합니다.

2014/11/04 - [웹개발강좌/jQueryUI] - jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기

jQueryUI에 대한 연동이 완료되었다면

jqGrid 플러그인을 다운로드 받도록 합니다.

http://www.trirand.com/blog/?page_id=6

URL 접속 후 Download버튼을 클릭하여 jqGrid 압축파일을 다운받습니다.

스크롤을 내리면 하단과 같은 버튼이 존재 할 겁니다.

다운로드 파일을 압축 해제 후 존재하는 css/js/plugins/src 디렉토리를

자신의 웹프로젝트에 "jqgrid" 디렉토리 생성 후 복사+붙여넣기를 합니다.

위에 파란줄친게 jqueryui관련 플러그인 include파일이고

빨간줄을 jqgrid 관련 플러그인 include파일입니다.

index.html 이란 파일을 생성 후 연동을 해보도록 하겠습니다.

jqGrid 연동을 위한 include 코드

<link rel="stylesheet" type="text/css" media="screen" href="/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/jqueryui/jquery-ui.js"></script>
<script src="/jqgrid/js/jquery.jqGrid.src.js"></script>

경로는 다를 수 있으니 자신의 경로에 맞춰서 include 해주세요

include를 해주셨다면 body 태그 사이에 그리드 출력을 위한 태그를 삽입해주세요

1	`<table` `id="list"></table>`

※ jqGrid를 이용하여 그리드 목록 출력시, table 태그를 이용해주어야 합니다.

로컬데이터를 그리드에 출력을 위한 스크립트코드

$(function(){
        //가상의 local json data
        var gridData = [{seq:"1",create_date:"2007-10-01",create_name:"test",title:"note",hitnum:"11"},
                      {seq:"2",create_date:"2007-10-02",create_name:"test2",title:"note2",hitnum:"22"}];
         
        //jqGrid껍데기 생성
        $("#list").jqGrid({
            //로컬그리드이용
            datatype: "local",
            //그리드 높이
            height: 250,
            //컬럼명들
            colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
            //컬럼모델
            colModel:[
                {name:'seq'},
                {name:'title'},
                {name:'create_date'},
                {name:'create_name'},
                {name:'hitnum'}     
            ],
            //그리드타이틀
            caption: "그리드 목록"
        });
         
        // 스크립트 변수에 담겨있는 json데이터의 길이만큼 
        for(var i=0;i<=gridData.length;i++){
                //jqgrid의 addRowData를 이용하여 각각의 row에 gridData변수의 데이터를 add한다
                $("#list").jqGrid('addRowData',i+1,gridData[i]);
        }
})

위 처럼 정상적으로 그리드내에 데이터가 출력된 것을 확인할 수 있습니다.

이어서 서버통신으로 그리드 데이터 호출을 해보도록 하겠습니다.

json 파싱하는부분은 저는 json-simple 라이브러리를 이용하여 예를 들도록 하겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

기존 코드는 동일하고 스크립트 코드를 변경해보도록 하겠습니다.

Ajax 통신으로 그리드 데이터출력관련 스크립트

$(function(){
    $("#list").jqGrid({  
        //ajax 호출할 페이지
        url:'/result.jsp',
        //로딩중일때 출력시킬 로딩내용
        loadtext : '로딩중..',
        //응답값
        datatype: "json",
        height: 250,
        colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
        colModel:[
            {name:'seq'},
            {name:'title'},
            {name:'create_date'},
            {name:'create_name'},
            {name:'hitnum'}     
        ],
        caption: "그리드 목록"
    });
})

일괄적으로 페이징 처리 없이 서버에서

응답받은 데이터를 한꺼번에 출력시키는 방식입니다.

호출하는방식이 $.ajax와 흡사합니다.

그럼 jqGrid 속성중 url에 정의한 jsp페이지에서 json 파싱작업을 하도록 하겠습니다.

result.jsp 서버페이지 코드

JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArray = new JSONArray();
 
//1번째 데이터
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "1");
jsonObj2.put("title", "제목");
jsonObj2.put("create_date", "2014-11-11");
jsonObj2.put("create_name", "개발로짜");
jsonObj2.put("hitnum", "1");
jsonArray.add(jsonObj2);
 
//2번째 데이터
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "2");
jsonObj2.put("title", "제목222");
jsonObj2.put("create_date", "2014-11-11");
jsonObj2.put("create_name", "개발로짜2323");
jsonObj2.put("hitnum", "10");
jsonArray.add(jsonObj2);
 
PrintWriter pw = response.getWriter();
pw.print(jsonArray);
pw.flush();
pw.close();

json array 객체를 클라이언트 페이지로 넘겨 주었습니다.

맨처음 진행한 local 타입에 사용했던 json 변수와 동일한 구조로 넘겨준것 뿐입니다.

즉, gridData 변수의 담겨있던 json 데이터를 result.jsp 페이지로 이동(?) 된 것 뿐입니다.

추가로 그리드 페이징에 대하여 진행하겠습니다.

페이징UI 적용을 위한 DIV 태그를 추가하도록 합니다.

1	`<div` `id="page"></div>`

다음으로 스크립트 코드를 작성해보았습니다.

$(function(){
     $("#list").jqGrid({  
        url:'/result.jsp',
        datatype: "json",
                loadtext : '로딩중..',
        height : 250,
        //한페이지에 출력할 데이터 갯수
        rowNum : 2,
        //페이징UI적용을 위한 속성
        pager: '#page',
        colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
        colModel:[
            {name:'seq'},
            {name:'title'},
            {name:'create_date'},
            {name:'create_name'},
            {name:'hitnum'}     
        ],
        caption: "그리드 목록"
    });
})

기존 ajax 코드에서 2가지(rowNum,pager) 속성이 추가되었습니다.

rowNum : 한페이지당 몇개의 데이터를 출력할지

pager : 페이징UI 적용할 셀렉터

이어서 result.jsp 서버 코드를 변경해보도록 하겠습니다.

페이징처리 예를들기위한 result.jsp 샘플코드

//현재페이지
String current_page = request.getParameter("page");
//한페이지에 최대 몇개의 row 출력(mysql의 limit에 속하는데이터)
String numper_page = request.getParameter("rows");
JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArray = new JSONArray();
     
if(current_page.equals("1")) {
    jsonObj2 = new JSONObject();
    jsonObj2.put("seq", "1");
    jsonObj2.put("title", "제목");
    jsonObj2.put("create_date", "2014-11-11");
    jsonObj2.put("create_name", "개발로짜");
    jsonObj2.put("hitnum", "1");
    jsonArray.add(jsonObj2);
     
    jsonObj2 = new JSONObject();
    jsonObj2.put("seq", "2");
    jsonObj2.put("title", "제목2");
    jsonObj2.put("create_date", "2014-11-15");
    jsonObj2.put("create_name", "개발로짜");
    jsonObj2.put("hitnum", "20");
    jsonArray.add(jsonObj2);
} else if(current_page.equals("2")) {
    jsonObj2 = new JSONObject();
    jsonObj2.put("seq", "3");
    jsonObj2.put("title", "제목33");
    jsonObj2.put("create_date", "2014-11-11");
    jsonObj2.put("create_name", "개발로짜33");
    jsonObj2.put("hitnum", "8");
    jsonArray.add(jsonObj2);
     
    jsonObj2 = new JSONObject();
    jsonObj2.put("seq", "4");
    jsonObj2.put("title", "제목4444");
    jsonObj2.put("create_date", "2014-11-15");
    jsonObj2.put("create_name", "개발로짜12");
    jsonObj2.put("hitnum", "2");
    jsonArray.add(jsonObj2);
}
 
//현재페이지의 목록데이터
jsonObj.put("rows", jsonArray);
//현재페이지
jsonObj.put("page", current_page);
//총페이지수
jsonObj.put("total", 2);
//총글목록수
jsonObj.put("records", 4);
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

위 코드는 db처리 없이 임의로 current_page값 구분으로

가상의 페이징처리로 데이터를 파싱 하였습니다.

그리고 페이징 처리시 데이터 목록의 json array 의 경우 rows 키에 담겨져야 하며

현재페이지(page), 총페이지수(total), 총글목록 카운트(records) 에 담아서

클라이언트 페이지에 response 해주어야 합니다.

실행을 해보도록 하겠습니다.

위와같이 데이터 출력을 되었으나 로딩문구가 계속 출력되며

하단 페이징화면도 제대로 나타나지 않습니다.

F12 를 눌러서 오류 메시지를 확인해 보았는데

"Uncaught TypeError: Cannot read property 'integer' of undefined"

라는 메시지 출력이 되었습니다.

페이징 처리를 위해서 LOCALE 설정을 잡아주지 않아서입니다.

jqgrid -> src 0> i18n 디렉토리 내에 자신의 원하고자 하는 locale 파일을 include 해주도록 합니다.

저같은 경우는 한글 locale 설정을 하므로 "grid.locale-kr.js" 파일을 include하였습니다.

1	`<script` `src="/jqgrid/src/i18n/grid.locale-kr.js"></script>`

다시 실행을 해보도록 하겠습니다.

그리드 1페이지 결과

그리드 2페이지 결과

실행결과 정상적으로 출력되네요

즐거워

다음에 시간이 되면 컬럼 수정 및 기타 추가 기능에 대하여 포스팅 해보도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > jQuery 플러그인' 카테고리의 다른 글

jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기 (0)	2014.10.25
jQuery Validation 플러그인을 이용하여 손쉽게 검증하기 (1)	2014.10.22
jQuery blockUI 플러그인을 이용하여 레이어팝업(모달) 만들기 (2)	2014.10.21
jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기 (0)	2014.10.15
jQuery jqPlot를 사용하여 선형,원형(파이형),막대형 그래프 생성하기 (9)	2014.10.15

/56

2014. 10. 25. 00:30

jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기

jQuery를 이용하지 않아도 쿠키 핸들링은 가능합니다.

하지만 jQuery Cookie 플러그인은 이미 만들어져있고

사용법 또한 간단하기때문에 포스팅 하게되었습니다.

이번 포스팅에서 다룰 내용은

쿠키정보 저장 및 불러오기, 정보 삭제 등에

대한 내용을 작성하도록 하겠습니다.

제일먼저 jQuery Cookie 플러그인 js파일을 다운받아야 겠죠?

https://github.com/carhartl/jquery-cookie

접속하셔서 Download ZIP버튼을 클릭하여 플러그인을 받습니다.

다운로드 받으셨다면 압축해제 후 src 디렉토리 안에 있는 jquery.cookie.js 파일을

해당 프로젝트내에 include해줍니다.

보통 쿠키는 보안이 좋지 않기때문에 간단한 정보를 담는정도로만 사용하셔야합니다.

예를들어 로그인페이지에서 체크박스클릭으로 아이디 저장기능정도(?)로 사용하시면 되겠습니다.

그럼 로그인화면을 예로들어서 쿠키플러그인을 사용해보도록 하겠습니다.

쿠키연동을위한 jQuery + jQuery Cookie 플러그인 include

1 2	`<script` `type="text/javascript"` `src="//code.jquery.com/jquery-1.11.0.min.js"></script>` `<script` `type="text/javascript"` `src="jquery.cookie.js"></script>`

가상의 로그인 HTML 페이지

아이디 : <input type="text" id="login_id" /><br/>
아이디저장 <input type="checkbox" id="rememberid" /><br/>
<input type="button" id="login_button" value="로그인" />

쿠키를 이용한 jQuery 기능 구현 코드

$(function(){
    //최초 쿠키에 login_id라는 쿠키값이 존재하면
    var login_id = $.cookie('login_id');
    if(login_id != undefined) {
        //아이디에 쿠키값을 담는다
        $("#login_id").val(login_id);
        //아이디저장 체크박스 체크를 해놓는다
        $("#rememberid").prop("checked",true);
    }
     
    //로그인 버튼 클릭시
    $("#login_button").click(function(){
        //아이디 미입력시
        if($.trim($("#login_id").val()) == "") {
            alert("아이디를 입력하세요");
            return;
        //아이디 입력시
        } else {
            //아이디저장 체크되어있으면 쿠키저장
            if($("#rememberid").prop("checked")) {
                $.cookie('login_id', $("#login_id").val());
            //아이디저장 미체크면 쿠키에 정보가 있던간에 삭제
            } else {
                $.removeCookie("login_id");
            }
            alert("로그인!!");
        }
    })
})

스크립트 코드를 보시면 주석으로 설명을 달아놓았습니다.

쿠키 값을 불러올 경우 $.cookie("저장된쿠키의key값") 으로 값을 불러왔습니다.

이 사용은 get을 의미합니다.

※ 존재하지 않는 쿠키값일경우 undefined값이므로 조건 체크를 해주셔야 하겠습니다.

다음은 로그인 버튼 클릭시 체크박스 유무에 따라서

체크박스 체크시 : $.cookie("저장할쿠키key값","저장할쿠키값") 으로 특정 쿠키명에 값을 저장해주었습니다.

이 부분은 set을 의미합니다.

체크박스 해제시 : $.removeCookie("삭제할쿠키key값") 을 사용하였습니다.

참 심플하지 않은가요? ^^???

추가로 쿠키값 set을 해줄경우 추가적인 몇가지 옵션에 대해서 간단하게 설명을 드리겠습니다.

jQuery Cookie 추가옵션

$.cookie('쿠키명','쿠키값',{
            //쿠키보관일
            expires : 5
            //도메인
           ,domain : 'http://hellogk.tistory.com'
            //https/http 결정
           ,secure : false
});

위 설정에보시면 쿠키값 저장해주실때 추가로 속성을 정의하실수 있습니다.

1. expires - 생성한후 만료일자를 정해주는것입니다. 값에 5라고 정할경우 5일동안 정보를 저장합니다.

2. domain - 쿠키 저장할 도메인인대 거의 사용되지 않는 옵션일거 같습니다.

3. secure - HTTPS 프로토콜 사용시 true 속성을 되겠습니다.

위 속성외에도 path라고 쿠키 경로를 설정하는 것이 있는데 뭔지 정확하게 몰라서 있다는 정도만 알아두시면 되겠습니다 ^^;;

쿠키관련 샘플코드 실행 결과

초기 화면

아무래도 쿠키정보가 전혀없으니 현재는 빈값입니다.

아이디저장체크안하고 아이디입력후 로그인버튼 클릭

확인버튼 클릭후 새로고침

새로고침 결과 쿠키정보를 저장안했으므로 빈값이 Load 되었습니다.

이어서, 쿠키정보를 저장하도록 해보겠습니다.

아이디저장체크후 로그인버튼 클릭

확인버튼 클릭 후 새로고침

새로고침한 다음에 아이디 text태그에 입력값이 들어가고

아이디저장 체크박스에 체크가 되어러 로드된것을 확인할 수 있었습니다.

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > jQuery 플러그인' 카테고리의 다른 글

jqGrid 플러그인을 이용하여 그리드 연동 및 목록 출력시켜보기 + ajax 페이징 포함 (7)	2014.11.10
jQuery Validation 플러그인을 이용하여 손쉽게 검증하기 (1)	2014.10.22
jQuery blockUI 플러그인을 이용하여 레이어팝업(모달) 만들기 (2)	2014.10.21
jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기 (0)	2014.10.15
jQuery jqPlot를 사용하여 선형,원형(파이형),막대형 그래프 생성하기 (9)	2014.10.15

/48

2014. 10. 22. 16:00

jQuery Validation 플러그인을 이용하여 손쉽게 검증하기

보통 웹 프로젝트에서 폼전송을 하기전 필수값 혹은 검증을 하는 절차를 거친다음 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 플러그인은 규칙까지 별도로 만드는 기능까지 제공해주니 정말 좋은거 같습니다.

하트3

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

이번코드에서는 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 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > jQuery 플러그인' 카테고리의 다른 글

jqGrid 플러그인을 이용하여 그리드 연동 및 목록 출력시켜보기 + ajax 페이징 포함 (7)	2014.11.10
jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기 (0)	2014.10.25
jQuery blockUI 플러그인을 이용하여 레이어팝업(모달) 만들기 (2)	2014.10.21
jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기 (0)	2014.10.15
jQuery jqPlot를 사용하여 선형,원형(파이형),막대형 그래프 생성하기 (9)	2014.10.15

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

jqGrid 플러그인을 이용하여 그리드 연동 및 목록 출력시켜보기 + ajax 페이징 포함

jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기

jQuery Validation 플러그인을 이용하여 손쉽게 검증하기

jqGrid 연동을 위한 include 코드

로컬데이터를 그리드에 출력을 위한 스크립트코드

Ajax 통신으로 그리드 데이터출력관련 스크립트

result.jsp 서버페이지 코드

페이징처리 예를들기위한 result.jsp 샘플코드

'코드저장소 > jQuery 플러그인' 카테고리의 다른 글

쿠키연동을위한 jQuery + jQuery Cookie 플러그인 include

가상의 로그인 HTML 페이지

쿠키를 이용한 jQuery 기능 구현 코드

jQuery Cookie 추가옵션

쿠키관련 샘플코드 실행 결과

'코드저장소 > jQuery 플러그인' 카테고리의 다른 글

INCLUDE해야 할 파일

검증을 위한 HTML 코드

JAVASCRIPT CODE

실행결과

회원가입 html코드

Validation 검증 스크립트 코드

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

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

Validation 폼검증 실행결과

'코드저장소 > jQuery 플러그인' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역