[jQuery] 제이쿼리 validate를 이용한 폼 검증

input 태그를 검증하기 위한 jQuery 라이브러리 validate 사용 순서입니다.

 

1) jQuery import

2) jQuery validate import

3) 검증할 태그를 선택하여 validate() 적용

4) validate 함수 내에서 필요한 설정 적용

 

예제 코드는 아래를 참고해주세요.

 

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 제이쿼리 validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>




<!-- 검증할 form 태그 -->
<form id="searchForm">
	<input type="text" name="userName" id="userName">
    <button type="submit">전송</button>
</form>


<!-- validate에서 검증 -->
<script>


	$("#searchForm").validate({

        // validate로 체크할 항목을 선정
        rules : {
            userName : {
                required : true
            }
        },
        
        // 미입력시 띄어줄 메시지를 입력
        messages : {
            userName : {
                required : '이름을 입력해주세요.'
            }
        },
    });

</script>

 

위처럼 작성했을 때 input 태그에 입력 없이 전송 버튼을 눌렀을 때 오른쪽에 '이름을 입력해주세요.' 라는 문구와 함께 submit을 막아줍니다.