매번 script에서 form(폼) 안에 있는 모든 입력 요소(required 속성이 있는 입력 요소)에 대해 checkValidity() 메서드를 호출하고 validity 유형에 따라 메시지를 작성하여 노출시켜야 하는 번거로움이 있습니다.
그래서 한 번에 호출하고 한 번에 유효성 메시지를 노출시키는 방법에 대해 알아보겠습니다.
checkValidity() 메서드는 입력 요소뿐만 아니라 form(폼)에서도 사용할 수 있습니다. 그래서 form(폼)에서 checkValidity() 메서드를 호출하면 form(폼) 안에 있는 모든 입력 요소(required 속성이 있는 입력 요소)에 대해 유효성 검사를 진행하게 됩니다. required 속성이 있는 입력 요소 전체가 유효하지 않으면 false를 리턴합니다.
Maven Spring Project에 JavaScript Validation API 적용하기
1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <script>에서 기존 등록 버튼에 있는 script는 주석처리하고 form(폼)의 checkValidity() 메서드를 호출합니다.
$('#saveBtn').click(function() {
/*
var registrationId = $('#registrationId')[0];
if (!registrationId.checkValidity()) {
if (registrationId.validity.valueMissing) {
registrationId.setCustomValidity('작성자 입력란에 아이디가 입력되지 않았습니다.\n아이디를 입력하세요.');
} else if (registrationId.validity.tooShort) {
registrationId.setCustomValidity('작성자 입력란에 아이디는 최소 2자이상 최대 20자 이내로 입력하세요.');
}
alert(registrationId.validationMessage);
$("#registrationId").focus();
registrationId.setCustomValidity("");
return;
}
var subject = $('#subject')[0];
if (!subject.checkValidity()) {
if (subject.validity.valueMissing) {
subject.setCustomValidity('제목 입력란에 제목이 입력되지 않았습니다.\n제목을 입력하세요.');
}
alert(subject.validationMessage);
$("#subject").focus();
subject.setCustomValidity("");
return;
}
$('#board').attr("action", "/board/addboard.do");
$('#board').submit();
*/
var boardForm = $('#board')[0];
if (!boardForm.checkValidity()) {
var registrationId = $('#registrationId')[0];
console.log(registrationId.validity);
var subject = $('#subject')[0];
console.log(subject.validity);
} else {
console.log("에러가 없습니다.");
}
});
form(폼)의 checkValidity() 메서드는 form(폼) 안에 있는 모든 입력 요소에 대해 유효성 검사를 진행하기 때문에 form(폼)의 validity 속성은 없습니다. 콘솔로 출력해 보면 undefined입니다.
그래서 입력 요소 별로 유효한지 확인하기 위해서는 입력 요소 별로 validity 속성으로 확인하면 됩니다.
Maven Spring Project를 실행하여 웹 브라우저로 확인하기
1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.
2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.
3. 등록 버튼을 누르고 콘솔을 확인하면 validity 속성 값이 출력됩니다.
CSS :valid vs :invalid
입력 요소가 유효하면 입력 요소의 CSS에 :valid selector가 실행되고 유효하지 않으면 :invalid selector가 실행됩니다.
CSS의 :valid selector와 :invalid selector는 입력 요소에서 checkValidity() 메서드가 실행되지 않아도 입력 요소에 required 속성이 있으면 자동으로 실행됩니다.
Maven Spring Project에 CSS :valid와 :invalid 적용하기
1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <style> 태그에 입력 요에 대한 :valid selector와 :invalid selector를 추가합니다.
- 입력 요소가 유효하면 녹색으로 유효하지 않으면 붉은색으로 설정합니다.
.form-input:invalid { border: 1px solid #dc3545; }
.form-input:valid { border: 1px solid #198754; }
2. 필수 입력 요소인 작성자(registrationId)와 subject(제목) <form:input> 태그에 class를 추가합니다.
<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" /></td>
</td>
</tr>
<tr>
<th scope="row">제목</th>
<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" /></td>
</tr>
<tr>
<th scope="row">내용</th>
<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
</tr>
</tbody>
</table>
</form:form>
웹 브라우저를 새로고침 하면 작성자(registrationId)와 subject(제목)이 붉은색으로 표시되는 것을 확인할 수 있습니다.
작성자(registrationId)에 "testid3"를 입력하고 subject(제목)에 "테스트 제목"을 입력하면 입력 요소가 녹색으로 표시되는 것을 확인할 수 있습니다.
그렇지만 등록 버튼을 누르기 전에 form(폼)에 있는 입력 요소들이 붉은색으로 표시되기 때문에 그대로 사용하기에는 적합하지 않습니다.
그래서 <script>에서 등록 버튼이 눌러질 때만 처리되게 변경하면 됩니다. 그리고 입력 요소가 유효하지 않으면 메시지가 노출되게 처리하겠습니다.
Maven Spring Project에 CSS 변경 및 메시지 추가하기
1. <style> 태그에 입력 요에 대한 CSS를 변경합니다.
- :valid selector와 :invalid selector를 Validation(밸리데이션)할 때만 처리되게 "was-validated"를 추가합니다.
- 입력 요소가 유효하지 않을 때 입력 요소 아래에 메시지가 붉은색으로 노출되게 "invalid-feedback"를 추가합니다.
.was-validated .form-input:invalid { border: 1px solid #dc3545; }
.was-validated .form-input:valid { border: 1px solid #198754; }
.invalid-feedback { display: none; width: 100%; margin-top: 4px; color: #dc3545; }
.was-validated .form-input:invalid~.invalid-feedback { display: block; }
2. 필수 입력 요소인 작성자(registrationId)와 subject(제목) <form:input> 태그 다음에 유효하지 않을 때 노출될 메시지를 추가합니다.
<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>에서 기존 등록 버튼에 있는 script는 삭제하고 form(폼)의 checkValidity() 메서드를 호출한 후 유효하지 않으면 form(폼)의 CSS에 "was-validated"를 추가합니다.
$('#saveBtn').click(function() {
var boardForm = $('#board');
if (!boardForm[0].checkValidity()) {
boardForm.addClass('was-validated');
} else {
boardForm.attr("action", "/board/addboard.do");
boardForm.submit();
}
});
웹 브라우저를 새로고침합니다.
등록 버튼을 누르면 작성자(registrationId)와 subject(제목)이 붉은색으로 표시되고 메시지가 노출되는 것을 확인할 수 있습니다.
작성자(registrationId)에 "testid3"를 입력하면 녹색으로 표시되는 것을 확인할 수 있습니다.
그리고 subject(제목)에 "테스트 제목"을 입력하면 녹색으로 표시되는 것을 확인할 수 있습니다.
내용을 입력하고 등록 버튼을 누르면 정상적으로 등록되는 것을 확인할 수 있습니다.
form(폼)의 checkValidity() 메서드와 CSS의 :valid selector와 :invalid selector를 사용하면 유효성 검사 및 메시지 처리를 간단하게 할 수 있습니다.
이어서 Server-Side Validation에 대해 알아보고 추가해 보겠습니다.