[JQUERY] formValidation 다운로드 및 사용법

javascript, jquery formValidation 다운로드 및 사용법에 대해 알아보겠습니다.

어떤 폼을 제출할 때 프론트에서 필수 항목을 입력했는지 체크할 수 있는 플러그인입니다.

 

---

 

1. formValidation 다운로드

다운로드 바로가기

 

 

2. 참조 링크 추가

<script src="/bower_components/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/bower_components/formvalidation/dist/js/framework/bootstrap.min.js"></script>

- 다운받은 파일의 경로를 추가해줍니다.

 

 

3. HTML 예시 코드

<form id="new-form" action="FormController" method="post">

    <div class="form-group">
        <label class="control-label" for="company">회사명</label>
        <input class="form-control" name="company" id="company" type="text">
    </div>
    
    <div class="form-group">
        <label class="control-label" for="address">주소</label>
        <input class="form-control" name="address" id="address" type="text">
    </div>
    
    <div class="form-group">
        <label class="control-label" for="email">이메일</label>
        <input class="form-control" name="email" id="email" type="email">
    </div>
    
    <button type="submit">제출하기</button>

</form>

 

 

3. js 파일 내용

$(document).ready(function() {
    $('#new_form').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            company: {
                validators: {
                    notEmpty: {
                        message: '회사명을 입력해 주십시오.'
                    }
                }
            },
            address: {
                validators: {
                    notEmpty: {
                        message: '주소를 입력해 주십시오.'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '이메일을 입력해 주십시오.'
                    },
                    emailAddress: {
                        message: '유효한 이메일을 입력해 주십시오.'
                    }
                }
            }
        }
    });

 

- 회사명을 입력하지 않았을 경우, "회사명을 입력해 주십시오." 라는 문구가 하단에 뜨고 input 란이 빨갛게 변합니다.

- 주소를 입력하지 않았을 경우, "주소를 입력해 주십시오." 라는 문구가 하단에 뜨고 input 란이 빨갛게 변합니다.

- 이메일을 입력하지 않았을 경우, "이메일을 입력해 주십시오." 라는 문구가 하단에 뜨고 input 란이 빨갛게 변합니다.

- 이메일을 입력했으나 이메일 형식이 올바르지 않을 경우, "유효한 이메일을 입력해 주십시오." 라는 문구가 하단에 뜨고 input 란이 빨갛게 변합니다.

 

- 위의 4가지 체크를 통과하지 못하면 submit 버튼이 비활성화가 됩니다.

 

 

 

이상으로 jquery 플러그인 formValidation을 사용하는 법에 대해 알아보았습니다.

 

---