[JQuery, Bootstrap] Bootstrap Validator를 이용한 유효성 체크

1. HTML

<form id="MyForm" method="post">
    <table class="table">
    	<tr>
            <td>
            	<input id="myText" name="text1" class="form-control" type="text" autocomplete="off">
            	<input id="myDay" name="day1" class="form-control" type="text" autocomplete="off">
            </td>
        </tr>
    </table>
</form>

 

 

2. Jquery

이때, 주의할 점은 datepicker를 사용하면

datepicker를 다시 다시 눌러서 값을 수정할 경우 (key입력이 아닌 val()를 통해 값이 입력)

유효성 체크를 하지 않으므로 revalidate를 추가해야합니다.

 

<script>
$(document).ready(function() {
    	$("#myDay").datepicker({
                format: "yyyy.mm.dd",
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true
        }).on('hide.bs.modal', function (e) {
            //datepicker가 close될 때, sign-up-modal까지의 hide.bs.modal Event의 전파를 막음.
            e.stopPropagation();
        }).on('changeDate show', function() {
        	//datepicker를 다시 눌렀을 때, bootstrapValidator를 다시 수행
            $("#MyForm").bootstrapValidator('revalidateField', 'day1');
        });
    
    
    	$("#MyForm").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'pli-yes text-success',
                invalid: 'pli-close',
                validating: 'pli-refresh'
            },
            fields: {
                text1: {
                    validators: {
                        regexp: {
                                regexp: /^[a-zA-Z]{1,}$/,
                                message: '> Please enter valid initials (only alphabet)'
                        },
                        notEmpty: {
                            message: '필수 입력 항목입니다.'
                        }
                    }
                },
                day1: {
                    validators: {
                        notEmpty: {
                            message: '필수 입력 항목입니다.'
                        }
                    }
                }
            }
        }).on('success.field.bv', function (e, data) {
            // $(e.target)  --> The field element
            // data.bv      --> The BootstrapValidator instance
            // data.field   --> The field name
            // data.element --> The field element
            var $parent = data.element.parents('.form-group');

            // Remove the has-success class
            $parent.removeClass('has-success');
        });
    
});
</script>

 

 

자세한 내용은 공식홈페이지 참고

: http://bootstrapvalidator.votintsev.ru/settings