[jQuery] jQuery Plugin을 이용한 form validation

jQuery Plugin을 이용한 form validation

1. 다운로드

http://jqueryvalidation.org 에서 Download를 클릭해서 파일을 다운받습니다.

2. 인크루드 파일 및 설명

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="jquery.validate.min.js"></script>

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

cf.) jQuery 버전은 jquery-1.7.2이상에서 동작되는 거 확인되었습니다. 그 이하는 저도 잘 모릅니다. 한번 확인해보세요!

3. HTML 코드

<form id="frm" action="board_action.jsp" method="post">

<table class="table" style="border-collapse:seperate;">

<colgroup>

<col style="align:center;"/>

</colgroup>

<tbody>

<tr>

<th><label>작성자</label></th>

<td><input type="text" name="name" id="name"  value="" /></td>

</tr>

<tr>

<th><label>E-mail</label></th>

<td><input type="text" name="email" id="email" value="" /></td>

</tr>

<tr>

<th><label>cellphone</label></th>

<td><input type="text" name="phone" id="phone" value="" /></td>

</tr>

<tr>

<th><label>제목</label></th>

<td><input type="text" name="subject" id="subject" value="" /></td>

</tr>

<tr>

<th><label>문의내용</label></th>

<td><textarea class="form-control" id="content" name="content" rows="10" maxlength="5000" ></textarea></td>

</tr>

<tr>

<th><label>비밀번호</label></th>

<td><input type="password" name="pwd" id="pwd" value="" /></td>

</tr>

</tbody>

</table>

<div align="center" style="margin-bottom:50px;margin-top:30px;">

<button type="submit" id="register" class="btn btn-success">등록</button>

<button type="button" id="cancel" class="btn btn-warning">취소</button>

</div>

</form>

4. 스크립트 코드

<script>

$(document).ready(function() {

    $("#frm").validate({

        //validation이 끝난 이후의 submit 직전 추가 작업할 부분

        submitHandler: function() {

            var f = confirm("글을 등록하시겠습니까?");

            if(f){

                return true;

            } else {

                return false;

            }

        },

        //규칙

        rules: {

            name: {

                required : true,

                minlength : 2,

            },

            email: {

                required : true,

                minlength : 2,

                email : true

            },

            phone: {

                required : true,

                minlength : 12

            },

            subject: {

                required : true,

            },

            content: {

            required : true

            },

            pwd: {

                required : true,

                minlength : 6

            }

        },

        //규칙체크 실패시 출력될 메시지

        messages : {

            name: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다"

            },

            email: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다",

                email : "메일 기재 규칙에 어긋납니다."

            },

            phone: {

                required : "필수 입력사항 입니다.",

                minlength : "숫자 또는 '-'을 누락하셨습니다."

            },

            subject: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다"             

            },

            content: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다"

            },

            pwd: {

            required : "필수 입력사항 입니다.",

            minlength : "최소 {0}글자이상이어야 합니다"

            }

        }

    });

});

(1) validate() 메서드의 속성

submitHandler : validation이 끝난 이후의 submit 직전 추가 작업할 부분

rules : 유효성 통과를 위한 규칙정의

messages:  검증실패일 경우 화면에 띄워줄 문구

5. Tip

에러메시지를 input 오른쪽 공간에 띄워 주는 스타일

<style type="text/css">

input.error, textarea.error{

  border:1px dashed red;

}

label.error{

  margin-left:10px;

  color:red;

}

</style>

cf.) 참조 URL

http://hellogk.tistory.com/48

http://mytory.net/archives/195/