Spring에 Hibernate(하이버네이트)의 BindingResult를 spring-form JSP Tag Library인 <form:errors> 또는 <spring:hasBindErrors>로 처리

Spring/Maven Project

Spring에 Hibernate(하이버네이트)의 BindingResult를 spring-form JSP Tag Library인 <form:errors> 또는 <spring:hasBindErrors>로 처리

carrotweb 2023. 3. 26. 22:08

728x90

Hibernate Validator로 유효성 검사한 결과(BindingResult 객체)를 Form Tag Library에 있는 <form:error> 태그를 사용하여 웹 페이지에서 처리하는 방법에 대해 알아보겠습니다.

<form:errors>

form에 대한 유효성 검사 결과 메시지를 <span> 태그로 렌더링 합니다.

path : Model(모델)과 연동하여 유효성 검사 결과를 바인딩할 속성 경로 (path가 *이면 전체 유효성 검사 결과 메시지가 노출됩니다. 메시지들은 <br>로 구분됩니다.)

<form:errors path="*" />

렌더링 결과

<span id="board.errors"></span>

form의 modelAttribute가 board이면 board.errors로 id가 설정됩니다.

유효성 검사 결과 메시지는 <span> 태그 안에 추가됩니다.

path에 Model(모델)의 속성 경로를 설정하면 Model(모델)의 속성에 대한 유효성 검사 결과 메시지가 노출됩니다.

<form:errors path="registrationId" />

렌더링 결과

<span id="registrationId.errors"></span>

그럼 <form:error> 태그를 사용하여 유효성 검사 결과 메시지를 노출시켜 보겠습니다.

Maven Spring Project에 <form:errors> 태그를 사용하여 전체 유효성 검사 결과 메시지 노출하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <style> 태그에 유효성 검사 결과에 대한 formerror를 추가합니다.

.board .formerror { display: block; padding: 10px 10px; margin-bottom: 10px; border: 1px solid #dc3545; font-size: 14px; color: #dc3545; }

2. <form:form> 태그 안에 <form:errors> 태그를 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<form:errors path="*" cssClass="formerror" />
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

3. <script>에서 기존이 있던 에러 입력 아이디(errorInputId)와 에러 메시지(errorMessage)에 대한 부분을 삭제합니다.

<c:if test="${not empty errorInputId && not empty errorMessage}">
$('#board').addClass('was-validated');
$('#${errorInputId}')[0].setCustomValidity("${errorMessage}");
//alert("${errorMessage}");
//$("#${errorInputId}").focus();
</c:if>

위의 부분을 삭제하면 됩니다.

삭제된 후 <script> 태그입니다. Server-Side Validation를 테스트하기 위해서 여전히 checkValidity 부분은 주석처리 되어있습니다.

$(function() {
	$('#saveBtn').click(function() {
		var boardForm = $('#board');
		//if (!boardForm[0].checkValidity()) {
		//	boardForm.addClass('was-validated');
		//} else {
			boardForm.attr("action", "/board/addboard.do");
			boardForm.submit();
		//}
	});
	$('#cancelBtn').click(function() {
		window.history.go(-1);
	});
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하여 게시물 입력 폼(/board/addform.do)으로 이동한 후 입력 폼에서 작성자, 제목, 내용에 입력하지 않고 등록 버튼을 클릭합니다. 그러면 입력 폼 위에 유효성 검사 결과 메시지 나타납니다.

만약 Board Model의 필드에 적용된 Hibernate Annotation에 message가 없다면 기본적인 유효성 검사 결과 메시지가 나타나게 됩니다.

Maven Spring Project에 <form:erros> 태그를 사용하여 개별 유효성 검사 결과 메시지 노출하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <style> 태그에 유효성 검사 결과에 대한 error를 추가합니다.

.board .error { display: block; padding: 10px 0px; font-size: 14px; color: #dc3545; }

2. <form:form> 태그 안에 있는 <form:errors> 태그는 삭제하고 작성자(registrationId)와 subject(제목) <form:input> 태그에 <form:errors> 태그를 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
				<form:errors path="registrationId" cssClass="error" />
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
				<form:errors path="subject" cssClass="error" />
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

웹 브라우저를 새로고침 하면 작성자(registrationId)와 subject(제목)의 입력란 아래에 붉은색으로 유효성 검사 결과 메시지가 표시되는 것을 확인할 수 있습니다.

만약 Board Model의 필드에 적용된 Hibernate Annotation에 message가 없다면 기본적인 유효성 검사 결과 메시지가 나타나게 됩니다.

이어서 Hibernate Validator로 유효성 검사한 결과(BindingResult 객체)를 Form Tag Library에 있는 <spring:hasBindErrors> 태그를 사용하여 유효성 검사 결과가 있을 때만 웹 페이지에서 처리하는 방법에 대해 알아보겠습니다.

JSP에서 <spring:hasBindErrors> 태그를 사용하기 위해서는 taglib(태그 라이브러리) 지시문을 추가해야 합니다.

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<spring:hasBindErrors>

form에 대한 유효성 검사 결과가 있으면 <spring:hasBindErrors> 태그에 있는 내용들이 처리되게 합니다. 그리고 유효성 검사 결과인 BindingResult 객체를 사용할 수 있게 errors.fieldErrors 객체로 전달해 줍니다.

name : Model(모델)과 연동할 속성 명

<spring:hasBindErrors name="board">
</spring:hasBindErrors>

Maven Spring Project에 <spring:hasBindErrors> 태그를 사용하여 유효성 검사 결과 처리하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하여 Form Tag Library를 사용하기 위해 jsp 페이지 상단에 taglib(태그 라이브러리) 지시문을 추가합니다.

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

2. <form:form> 태그 안에 있는 작성자(registrationId)와 subject(제목) <form:input> 태그에서 <form:errors> 태그를 삭제합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

3. </script> 태그 다음에 <spring:hasBindErrors> 태그를 다음과 같이 추가합니다.

<spring:hasBindErrors name="board">
	<script type="text/javascript">
		<c:forEach var="error" items="${errors.fieldErrors}">
			console.log("${error}");
		</c:forEach>
	</script>
</spring:hasBindErrors>

웹 브라우저를 새로고침 하면 웹 브라우저 콘솔로 errors 객체 정보가 표시되는 것을 확인할 수 있습니다.

org.springframework.validation.BeanPropertyBindingResult: 3 errors

Field error in object 'board' on field 'registrationId': rejected value []; codes [Size.board.registrationId,Size.registrationId,Size.java.lang.String,Size]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [board.registrationId,registrationId]; arguments []; default message [registrationId],20,2]; default message [작성자 아이디는 최소 2자, 최대 20자 이내로 입력하세요.]

Field error in object 'board' on field 'registrationId': rejected value []; codes [NotEmpty.board.registrationId,NotEmpty.registrationId,NotEmpty.java.lang.String,NotEmpty]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [board.registrationId,registrationId]; arguments []; default message [registrationId]]; default message [작성자 아이디를 입력하세요.]

Field error in object 'board' on field 'subject': rejected value []; codes [NotEmpty.board.subject,NotEmpty.subject,NotEmpty.java.lang.String,NotEmpty]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [board.subject,subject]; arguments []; default message [subject]]; default message [게시판 제목을 입력하세요.]

errors 객체에서 필드는 ${error.field}, 에러 코드(유효성 검사 유형)는 ${error.code}, 에러 메시지는 ${error.defaultMessage}를 사용하시면 됩니다.

4. <spring:hasBindErrors> 태그를 다음과 수정합니다.

유효성 검사 결과 유효하지 않는 필드가 있으면 form(폼)의 CSS에 "was-validated"를 추가하고 에러가 발생한 필드의 CSS에 "is-invalid"를 추가하여 메시지가 노출되게 합니다.
에러가 발생한 필드가 변경될 때마다 :valid를 체크하여 필드가 유효한 상태가 되면 "is-invalid"를 삭제하여 메시지가 노출되지 않게 합니다.

<spring:hasBindErrors name="board">
	<script type="text/javascript">
		$('#board').addClass('was-validated');
		$(function($, window) {
			<c:forEach var="error" items="${errors.fieldErrors}">
				setTimeout(function() {
					$('#${error.field}').addClass("is-invalid");
					$('#${error.field}').on("change", function(event) {
						if ($(this).hasClass("is-invalid") && $(event.target).is(':valid')) {
							$(this).removeClass("is-invalid");
						}
					});
				}, 0);
			</c:forEach>
		});
	</script>
</spring:hasBindErrors>

웹 브라우저를 새로고침 하면 유효하지 않는 입력 필드 아래에 유효성 검사 결과 메시지가 노출되는 것을 확인할 수 있습니다.

그리고 입력 폼에서 작성자에 "te" 입력하면 유효성 검사 결과 메시지가 사라지고 입력란의 색이 녹색으로 변경되는 것을 확인할 수 있습니다.

이처럼 Hibernate Validator와 Form Tag Library에 있는 <spring:hasBindErrors> 태그를 사용하면 Server-Side Validation 처리와 Client-Side에서 유효성 검사 결과 노출 처리를 할 수 있습니다.

코딩이 조금 복잡해 보일 수 있지만 Client-Side Validation과 Server-Side Validation를 같이 처리해 주는 것이 좋습니다.

이어서 게시물 보기, 게시물 수정, 게시물 삭제까지 처리해 보도록 하겠습니다.

728x90

저작자표시 비영리 변경금지

'Spring > Maven Project' 카테고리의 다른 글

Spring에 게시물 업데이트, 삭제 처리 - Update, Delete (0)	2023.05.01
Spring에 게시물 뷰 처리 - View (0)	2023.04.30
Spring에 Hibernate(하이버네이트) Validator 적용 - @NotNull, @NotEmpty, @Size, @Valid, BindingResult (0)	2023.03.05
Spring에 Server-Side Validation 처리 (0)	2023.02.12
Spring에 JavaScript Validation API 적용 - form checkValidity, CSS :valid vs :invalid (0)	2023.01.29

현재글Spring에 Hibernate(하이버네이트)의 BindingResult를 spring-form JSP Tag Library인 <form:errors> 또는 <spring:hasBindErrors>로 처리

눈으로 개발하는 블로그