[Bootstrap] class="invalid-feedback"이 작동하지 않을 때

<div class="invalid-feedback" th:if="${#fields.hasErrors('title')}" th:errors="*{title}">
                    제목 에러 메시지
					</div>

유효성 검사에 실패한 필드의 메시지를 출력하려니까 출력이 안된다.

 

 

✨ 해결

첫 번째 방법)

<span class="text-danger" th:if="${#fields.hasErrors('comment')}" th:errors="*{comment}"></span>

text-danger를 사용하니까 잘 동작한다.

 

 

두 번째 방법)

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
referenced by : https://getbootstrap.com/docs/5.0/forms/validation/

 

클래스에 is-invalid 또는 isvalid를 사용해야 invalid-feedback이 작동한다는 뜻이다.

 

<textarea id="reply" name="reply" class="form-control is-invalid" th:field="*{comment}" rows="4" placeholder="댓글을 입력하세요"></textarea>
<!--<span class="text-danger" th:if="${#fields.hasErrors('comment')}" th:errors="*{comment}"></span>-->
<span class="invalid-feedback" th:if="${#fields.hasErrors('comment')}" th:errors="*{comment}">
    내용 에러 메시지
</span>

textarea 태그의 클래스에 is-invalid를 추가했다.

 

유효성 검사 전

 

등록 버튼을 눌러 서버에서 응답받은 후

 

등록 버튼을 누른 후 유효성 검사를 할 것인데 처음부터 나오니까 맘에 안든다.

첫 번째 방법을 사용하기로 했다.

 

 

 

참고 👇

https://getbootstrap.com/docs/5.0/forms/validation/#server-side

Validation

 

https://stackoverflow.com/questions/45673354/bootstrap-4-invalid-feedback-with-input-group-not-displaying

Bootstrap 4 invalid feedback with input group not displaying