반응형
JPA 공부하다가 ThymeLeaf 쪽에 처음알게된 유용한 기능이 있어 기록하려 한다.
사실ThymeLeaf 단독 기능이기 보다는 Spring boot + java + ThymeLeaf 의 혼합이다.
요약하면
MemberForm 에서 @NotEmpty(message = "회원 이름은 필수 입니다")
어노테이션을 생성해주면
MemberController 에서
BindingResult result여기 파라미터로 오류체크를 한다.
오류가있으면 result에 오류 내용이 담김.
if(result.hasErrors()){
return "members/createMemberForm";
}에러가 있을경우 다시 html 로 날려버린다.
createMemberForm.html 에서는 아래코드부분에서 체크하여 유효성결과를 html코드로 다시 뿌려준다.
<input type="text" th:field="*{name}" class="form-control" placeholder="이름을 입력하세요"
th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'">
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Incorrect date</p>th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'">
-> 만일 name 필드에 에러가 있으면 classfmf form-control fieldError로 지정하고
아니라면 form-control 로 지정
-> Style 지정하기 위해 클래스 변경한다 삼항연산자
1. MemberForm
package jpabook.jpashop.controller;
import lombok.Getter;
import lombok.Setter;
import javax.validation.constraints.NotEmpty;
@Getter @Setter
public class MemberForm {
@NotEmpty(message = "회원 이름은 필수 입니다")
private String name;
private String city;
private String street;
private String zipcode;
}2. MemberController
package jpabook.jpashop.controller;
import jpabook.jpashop.domain.Address;
import jpabook.jpashop.domain.Member;
import jpabook.jpashop.service.MemberService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import javax.validation.Valid;
@Controller
@RequiredArgsConstructor
public class MemberController {
private final MemberService memberService;
@GetMapping("/members/new")
public String createForm(Model model){
model.addAttribute("memberForm",new MemberForm());
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(@Valid MemberForm form, BindingResult result){
if(result.hasErrors()){
return "members/createMemberForm";
}
Address address = new Address(form.getCity(), form.getStreet(), form.getZipcode());
Member member = new Member();
member.setName(form.getName());
member.setAddress(address);
memberService.join(member);
return "redirect:/";
}
}
3. createMemberForm.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<style>
.fieldError {
border-color: #bd2130;
}
</style>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader"/>
<form role="form" action="/members/new" th:object="${memberForm}" method="post">
<div class="form-group">
<label th:for="name">이름</label>
<input type="text" th:field="*{name}" class="form-control" placeholder="이름을 입력하세요"
th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'">
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Incorrect date</p>
</div>
<div class="form-group">
<label th:for="city">도시</label>
<input type="text" th:field="*{city}" class="form-control" placeholder="도시를 입력하세요"></div>
<div class="form-group">
<label th:for="street">거리</label>
<input type="text" th:field="*{street}" class="form-control" placeholder="거리를 입력하세요">
</div>
<div class="form-group">
<label th:for="zipcode">우편번호</label>
<input type="text" th:field="*{zipcode}" class="form-control" placeholder="우편번호를 입력하세요"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br/>
<div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
</html>
Spring boot 2.3 이상의 버전을 쓰고 있다면 build.gradle 에 추가 해줘야한다.
implementation 'org.springframework.boot:spring-boot-starter-validation'
빈칸으로 적게되면 NotEmpty에 적은 message내용을 출력하게 된다.
반응형
'Spring' 카테고리의 다른 글
| [HCCS] - Spring boot 웹사이트 구축 - 2 (기본 프로젝트 생성) (0) | 2022.06.27 |
|---|---|
| [HCCS] - Spring boot 웹사이트 구축 - 1 (0) | 2022.06.27 |
| [Spring boot] JasperReport 사용법 - 3 (pdf 출력) 한글 오류 (0) | 2022.04.25 |
| [Spring boot] JasperReport 사용법 - 2 (pdf 출력) Java (0) | 2022.04.25 |
| [MQTT] Mosquitto 설치 및 사용방법 - 2(pwfile 설정) (0) | 2021.12.14 |