▼ Backend/└ 게시판 만들기
Spring Boot (게시판) | Form 전송 시 필수 값 체크 (jQuery Validation Plugin)
Valar
2021. 11. 2. 10:59
반응형
▶ Validation Check
웹 사이트 작성 페이지에서 필수 값을 체크해야 하는 상황이 자주 발생하는데,
그 대상이 많아질 경우 Validation Plugin을 사용하여 간단하게 필수 값 체크를 할 수 있다.
jQuery Validation Plugin 추가
<!-- jQuery Validation Plugin-->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
CSS 적용
필수 값 체크 메시지에 color, font-weight를 적용했다.
.error { color:red; font-weight:bold; }
등록 HTML
write.html (/src/main/resources/templates/board)
필수 값을 체크하려는 입력 태그 속성에 required를 추가한다.
Form 전송 시 validate를 거쳐 통과되었을 경우 전송되고, 아니면 필수 값에 대한 입력 권고 텍스트가 노출된다.
디폴트 메시지 This field is required. 외에 다른 메시지를 입력하고 싶을 경우, validate내에 message 이용하여 직접 설정할 수도 있다.
전체 코드
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/default_layout">
<!-- layout Content -->
<th:block layout:fragment="content">
<div class="container">
<h1>Board Register.</h1>
<form id="frm" action="/board/write/action" method="post">
<div class="mb-3">
<label class="form-label">Title.</label>
<input type="text" class="form-control" name="title" required >
</div>
<div class="mb-3">
<label class="form-label">Content.</label>
<textarea class="form-control" rows="5" name="content" required ></textarea>
</div>
<div class="mb-3">
<label class="form-label">Writer.</label>
<input type="text" class="form-control" name="registerId" required >
</div>
<button type="button" class="btn btn-success" onclick="javascript:location.href='/board/list'">Previous</button>
<button type="button" class="btn btn-primary" onclick="fnSubmit();">Submit</button>
</form>
</div>
<script th:inline="javascript">
let frm = $("#frm");
function fnSubmit() {
$("#frm").submit();
}
$(function() {
frm.validate({
messages: {
// Message Custom..
title: {
required : "Custom required, Please enter a title."
}
},
submitHandler: function (form) {
// Submit Action..
form.submit();
}
});
});
</script>
</th:block>
</html>
테스트
그 외에 다른 체크도 가능하니 필요시 아래 사이트를 참고한다.
https://jqueryvalidation.org
#GitHub
https://github.com/conf312/board_study.git
#프로젝트 Import 방법
압축을 풀고, 이클립스 import → General → Existing Projects into Workspace
[스프링 부트 (Spring Boot)/게시판 만들기] 첨부파일 업로드, 다운로드 (MultipartHttpServletRequest)
반응형