BindingResult로 매개변수를 바인딩 할 시 오류가 발생해도 에러를 발생시키지 않고 에러코드를 BindingResult 객체가 저장하게 된다.그런데 코드 작성중 BindingResult가 작동하지 않고 그대로 에러가 발생하는 상황이 나왔다.6시간 정도 삽질 후에 원인을 발견했다.
m.addAttribute 저 부분이 문제였다.result 객체를 model에 담아서 view에 넘겨주고 이걸 jsp 페이지에서 다루고 싶어서 저렇게 코드를 작성했었다.알고보니 BindingResult 객체는 매개변수로 적을시 자동으로 model에 저장이 된다더라...적을 필요가 없는 코드였다.그리고 원인은 모르지만 저 코드를 추가할시 BindingResult가 에러를 잡아내지 못 한다.
정확히는,에러를 저장하긴 하는데 error jsp 코드로 이동해버린다.에러를 저장하고 잡지 않는건가??모르겠다...
jsp에서 errors 객체에 접근하는 과정도 험난했다.
<form:errors path="id" cssClass="msg" id="Error"/>이렇게 할시 form 태그가 errors를 감지하고 span을 자동으로 만들어준다.
errors객체의 id field에 있는 에러 메세지를 자동으로 출력해준다.
나는 여기서 단순 span만 보여주는게 아니라 예쁜 아이콘도 넣어주고 싶었다.그래서 나온 코드가
<c:if test="${errors.hasFieldErrors('id')}">
<div class="msg">
<i class="fa-regular fa-circle-xmark fa-xs"></i>
<form:errors path="id"/>
</div>
</c:if>이런 코드다.근데 작동을 안 하더라.아마 errors 객체에 접근하는 방법이 잘못된거 같은데 정확한 원인은 모르겠다.그래서 계속 삽질하다 그냥 js로 해결했다.동적인건 js로 해결하는게 속 편한거 같다.
window.onload = function() {
const errorElement = document.getElementById('Error'); // 에러 메시지 요소 찾기
if(errorElement) { // 에러 메시지가 출력되었는지 확인
var iconElement = document.createElement('i'); // <i> 태그 생성
iconElement.className = 'fa-regular fa-circle-xmark'; // 원하는 아이콘 클래스 지정
errorElement.insertBefore(iconElement, errorElement.firstChild); // <i> 태그를 에러 메시지 요소의 앞에 추가
}
};error라는 아이디가 존재할시 앞에 아이콘을 붙여주는 코드다.
