jquery validation

jquery validation

출처 : https://blog.naver.com/apchima/220753402272

관련 문서

• http://jqueryvalidation.org/documentation/
• http://jqueryvalidation.org/files/demo/

required

• jquery 1.6.4 or higher
• jquery.validate.js

목차

• demo
• validate()
• valid()
• rules
• example

jQuery( selector ).validate({ eventHandler })

jQuery( selector ).valid()

jQuery Validation 플러그인은 HTML 문서에서 FORM에 입력된 값들을 확인할 때 사용되는 플러그인, 즉 클라이언트 측 폼 데이터 검증 툴이다. 이 글에선 플러그인 사용에 필요한 필수적인 사항만 언급하고 있으니 더 자세한 내용은 공식페이지를 참고할 것.

demo

다음 파일들을 같은 경로에 위치시키고 sample.html 실행

 jquery-2.1.1.js

 jquery.validate.js

 sample.html

validate()

validate( { options } )

• debug: true일 경우 validation 후 submit을 수행하지 않음. (default: false)
• onfocusout: onblur 시 해당항목을 validation 할 것인지 여부 (default: true)
• rules: 각 항목¹ 별로 validation rule을 지정한다.
• messages: rules에서 정의된 조건으로 validation에 실패했을 때 화면에 표시할 메시지를 지정한다.
• errorPlacement: validator는 기본적으로 validation 실패 시 실패한 노드 우측에 실패 메시지를 표시하게 되어있다. 작동을 원하지 않으면 내용이 없는 errorPlacement를 선언한다.
• invalidHandler: validation 실패 시의 핸들러를 정의한다. 위의 경우 실패 메시지를 alert으로 표시하도록 되어 있다.
  
• submitHandler: 유효성 검사가 완료된 뒤 수행할 핸들러를 정의한다. 주의 할 점은 이 옵션을 명시할 경우 'submit' 이벤트만 발생하며 실제 FORM 전송은 일어나지 않는다는 것이다. 만약 submitHandler를 명시하지 않으면 유효성 검사 후 온전한 submit을 수행한다.

validate()는 유효성 검사 대상과 항목, 작동 등을 정의한다.

다음은 searchForm에서 submit 이벤트가 발생할 때 플러그인이 자동으로 작동하게 하는 예시다:

$(function() {
    $('#searchForm').validate({
        debug: false,
        onfocusout: false,
        rules: {
            searchValue: {
                required: true,
                maxlength: 10
            }
        }, messages: {
            searchValue: {
                required: '검색조건은 필수값입니다.',
                maxlength: $.validator.format('{0}자 내로 입력하세요.')
            }
        }, errorPlacement: function(error, element) {
            // do nothing
        }, invalidHandler: function(form, validator) {
             var errors = validator.numberOfInvalids();
             if (errors) {
                 alert(validator.errorList[0].message);
                 validator.errorList[0].element.focus();
             }          
        }
    });
});

valid()

설정한 validation의 트리거.

$('#searchForm').valid();

앞서 validate() 부분에서 잠시 언급했지만 기본적으로 validate() 메서드는 jQuery 셀렉터로 선택된 HTML 노드에 이벤트 핸들러를 할당하며 이 후 'submit' 이벤트가 발생하면 JSON으로 작성된 옵션과 함께 플러그인을 실행한다. 따라서 우리는 valid()를 호출하지 않고도 submit() 만으로도 플러그인을 작동시킬 수 있다.

valid() 메서드가 호출되고 validation 결과가 true일 떄 validator는 submitHandler를 실행한다. 다음을 보자:

function search() {
    $('#searchForm').submit();
}
 
// document on ready callback function
$(function() {
    $('#searchForm').validate({
        onfocusout: false,
        rules: {
            searchValue: {
                required: true,
                maxlength: 10
            }
        }, messages: {
            searchValue: {
                required: '검색조건은 필수값입니다.',
                maxlength: $.validator.format('{0}자 내로 입력하세요.')
            }
        }, errorPlacement: function(error, element) {
            // do nothing
        }, invalidHandler: function(form, validator) {
             var errors = validator.numberOfInvalids();
             if (errors) {
                 alert(validator.errorList[0].message);
                 validator.errorList[0].element.focus();
             }          
        }, submitHandler: function(form) {
            alert('handler invoke');
        }
    });
});

rules

required: 입력 필수 항목설정. text, password, select, radio, checkbox type에 사용된다.  ex) required: true

다른 필드에 의존되어 적용하는 경우:

<script type="text/javascript">
    $('#searchForm').validate({
        rules: {
            searchValue: {
                required: "#other:checked"
            }
        }
        // 중략
    });
</script>
 
<form id="searchForm">
    <input type="text" name="searchValue"/>
    <input type="checkbox" name="other" id="other"/>
</form>

checkbox가 체크 되기 전에는 required는 작동하지 않는다. '#other'의 #을 보면 알겠지만 jQuery selector expression으로 의존하는 필드를 찾게 되어 있다. 따라서 아이디가 아니라 name 속성이 other인 필드에 의존하려면 required: "[name=other]"라고 작성하면 된다.

<script type="text/javascript">
    $('#ageForm').validate({
        debug: true,
         rules: {
             age: {
                 required: true
             },
             parent: {
                 required: function(element) {
                     return $("#age").val() < 13;
                }
            }
        }
    });
</script>
 
<form id="ageForm">
    age: <input type="text" name="age" id="age"/><br>
    parent: <input type="text" name="parent"/>
    <input type="submit" value="valid"/>
</form>

이 경우 age의 값이 1~12 일 때만 parent를 체크

remote: 외부 URL을 이용한 validation이 필요한 경우 사용한다.

$("#myform").validate({
    rules : {
        emailAddress : {
            required : true,
            email : true,
            remote : {
                url : "check-email.php",
                type : "post",
                data : {
                    username : function() {
                        return $("#username").val();
                    }
                }
            }
        }
    }
});

equalTo: 다른 FORM 항목과 동일한 값인지 체크한다.

<script type="text/javascript">
    // document on ready callback function
    $(function() {
        $("#myForm").validate({
            rules: {
                password: "required",
                passwordConf: {
                    equalTo: "#password"
                }
            }
        });
    });
</script>
 
<form id="myForm">
    비밀번호: <input type="text" name="password" id="password"/><br>
    비밀번호확인: <input type="text" name="passwordConf"/>
    <input type="submit" value="valid"/>
</form>

minlength: 최소 길이 체크. ex) minlength: 3

maxlength: 최대 길이 체크. ex) maxlength: 10

rangelength: 길이 범위 체크. ex) rangelength[2, 6] (2글자 이상 6글자 이하)

min: 숫자의 최솟값 체크. ex) min: 13 (13보다 작을 경우 false)

max: 숫자의 최댓값 체크. ex) max: 5  (5보다 클 경우 false)

range: 숫자의 범위 체크. ex) range: [13, 24] (13보다 작거나 24보다 클 경우 false)

email: 이메일 형식의 값인지 체크. ex) email: true

url: 유효한 url 형식인지 체크. ex) url: true

date: 유효한 날짜 형식의 값인지 체크

dateISO: 유효한 국제표준 날짜 형식인지 체크. ex) dateISO: true

number: 유효한 숫자인지 체크. ex) number: true

digits: 유효한 digit 값인지 체크. number와 다른점은 양의 정수만 허용한다. 즉, 소수와 음수일 경우 false

creditcard: 유효한 카드번호 형식인지 체크. 공식페이지에서는 creditcard rule을 그대로 적용하지 말고 현지 사정에 맞게 수정하라고 권장한다. ex) creditcard: true

찾는 rule이 없다면 다음처럼 custom rule을 작성한다:

$.validator.addMethod("domain", function(value, element) {
    return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");
 
$.validator.addMethod("math", function(value, element, params) {
    return this.optional(element) || value == params[0] + params[1];
}, $.validator.format("Please enter the correct value for {0} + {1}"));

example

<h1>jQuery form validation plugin sample</h1>
<form id="validationForm" name="validationForm">
    이름 <input type="text" name="name"><br>
    비밀번호 <input type="text" name="pass" id="pass"><br>
    비밀번호확인 <input type="text" name="confirm_pass"><br>
    이메일 <input type="text" name="email"><br>
    출생년도 <input type="text" name="birthdate"><br>
    전화번호 입력 <input type="checkbox" name="telagree" id="telagree" onclick="$(this).next().toggle();"> 
    <input type="text" name="tel" style="display: none;"><br>
    홈페이지 <input type="text" name="homepage"><br>
    <button type="button" onclick="$(this.form).submit()">SUBMIT</button>
</form>
</body>
 
<script>
    // custom validation 정의
    $.validator.addMethod(
        'mobilephone', function (value, element) {
            return (value.substring(0, 1) == 0) ? true : false;
        }, '휴대전화 번호는 0 으로 시작하여야 합니다.'
    );
     
    $('#validationForm').validate({
        onfocusout: false,
        rules: {
            name: {
                required: true,
                minlength: 2
            }, pass: {
                required: true,
                rangelength: [5, 12]
            }, confirm_pass: {
                required: true,
                rangelength: [5, 12],
                equalTo: '#pass'
            }, email: {
                required: true,
                email: true
            }, birthdate: {
                required: true,
                number: true,
                range: [1900, 2013]
            }, tel: {
                required: function (element) {
                    return $('#telagree').is(':checked');
                },
                minlength: 10,
                mobilephone: true
            }, homepage: {
                url: true
            }
        }, messages: {
            name: {
                required: "이름을 입력하세요.",
                minlength: $.validator.format("이름은 최소 {0} 글자 이상 입력하세요.")
            }, pass: {
                required: "패스워드를 입력하세요.",
                rangelength: $.validator.format("패스워드 최소 {0}글자 이상 {1}글자 이하로 입력하세요.")
            }, confirm_pass: {
                required: "패스워드 확인 입력하세요.",
                rangelength: $.validator.format("패스워드 확인은 최소 {0}글자 이상 {1}글자 이하로 입력하세요."),
                equalTo: "패스워드 항목과 일치하지 않습니다."
            }, email: {
                required: "이메일을 입력하세요",
                email: "올바른 이메일 주소가 아닙니다."
            }, birthdate: {
                required: "출생 년도를 입력하세요.",
                number: "출생년도는 숫자로 입력하셔야합니다.",
                range: $.validator.format("출생년도는 {0}년에서 {1}년 사이의 값을 입력하세요.")
            }, tel: {
                required: "전화번호를 입력하세요.",
                minlength: $.validator.format("전화번호는 최소 {0} 글자 이상 입력하세요.")
            }, homepage: {
                url: "올바른 홈페이지 URL이 아닙니다."
            }
        }, errorPlacement: function (error, element) {
            // $(element).removeClass('error');
            // do nothing;
        }, invalidHandler: function (form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                alert(validator.errorList[0].message);
                validator.errorList[0].element.focus();
            }
        }, submitHandler: function (form) {
            $.ajax({
                type: "POST",
                url: "/sample/ajax/ajaxJson.do",
                data: $(form).serialize(),
                dataType: "json",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success: function (data) {
                    if (data.code == '0') {
                        alert('code:' + data.code + '\n' + 'msg:' + data.msg);
                    }
                }, error: function (jqXHR, textStatus, errorThrown) {
                    alert(failMsg + ' ' + textStatus.msg);
                }
            });
        }
    });
</script>

1. input, textarea 같은 필드를 의미하며 name 속성이 기준이다
   
   출처 : http://noritersand.tistory.com/211#footnote_link_211_1