jQuery | Validation Plugin 사용하기

 

▶ Validation Check

웹 사이트 작성 페이지에서 필수 값을 체크 해야 하는 상황이 자주 발생하는데,
그 대상이 많아질 경우 Validation Plugin을 사용하여 간단하게 필수 값 체크를 할 수 있다.

 

 jQuery, jQuery Validation Plugin 선언

 

<!-- jQuery -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- jQuery Validation Plugin-->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

 

 

「 HTML, JAVASCRIPT 작성 」

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        
<div class="card o-hidden border-0 shadow-lg my-5">
    <div class="card-body p-0">
        <div class="row">
            <div class="col-lg-5 d-none d-lg-block" style="background-image: url('/common/img/free_stamp.jpg');background-size: cover;"></div>
           <div class="col-lg-7">
               <div class="p-5">
                   <div class="text-center">
                       <h1 class="h4 text-gray-900 mb-4">Write an Board!</h1>
                   </div>
                   <form class="user" action="/board/save" id="frm" name="frm" method="post" enctype="multipart/form-data">
                       <div class="form-group">
                           <input type="text" class="form-control form-control-user" id="titl" name="titl" placeholder="Title" value="" />
                       </div>
                       <div class="form-group">
                           <textarea rows="8" class="form-control" id="cntn" name="cntn" placeholder="Contents" required ></textarea>
                       </div>
                       <div class="form-group">
                           <a href="javascript:submit();" class="btn btn-primary btn-user btn-block">Register Board</a>
                       </div>
                   </form>
                </div>
            </div>
        </div>
    </div>
</div>
        
<script type="text/javascript">
    var submit = function () {
        jQuery("#frm").submit();
    }
    
    $(function() {
        jQuery("#frm").validate({
            rules: {
                titl: {
                    required: true
                }
                /*
                , passwordConfirm: {
                    required: true,
                    equalTo: "input[name='password']"
                }
                , id: {
                    required: true,
                    remote: {
                        url: "/isDuplicated",
                        type: "POST",
                        data: {
                            id: function () {
                                return $('input[name="id"]').val();
                            }
                        }
                    }
                }
                */
            },
            messages: {
                titl: {
                    required : "Please enter a title."
                }
                /*
                , id: {
                    remote: 'This id is duplicated! please use another id.'
                }
                , passwordConfirm: {
                    equalTo: 'please enter the same password again.'
                }
                */
            },
            submitHandler: function (form) {
                // Submit Action..
                form.submit();
            }
        });
    });
</script>

 

 

「 값이 비어있는 상태에서 submit 」

 

 

rules에 name을 이용하여 requried 필수, 비필수 값을 설정하거나,
태그 인라인 속성 requried 넣어 필수 값으로 사용 할 수 있다.

추가적으로 equalTo, remote등을 사용 할 수 있고, 자세한 내용은 아래 사이트에서 확인 할 수 있다.
원하는 message를 지정할 수 있으며, 정하지 않을 경우
This field is required. 디폴트 메세지가 출력된다.

 

---

 

jQuery Validation Plugin
https://jqueryvalidation.org

jQuery Validation Plugin | Form validation with jQuery