Form의 checkValidity 기능

dev | 2022-03-26

서식 전송 전에 각 입력 박스에 오류메시지를 보여주기 위해서는 입력 요소의 oninvalid 이벤트를 이용하면 효과적으로 구현할 수 있다. 반면 요즘 많이 볼 수 있는 UX 중의 하나가 필수 요소를 모두 체크 했을 때 전송 버튼을 활성화하는 방식인데 개별 체크 박스를 검사히지 않고 전체 서식의 입력이 유효한지를 알 수 있다면 더 간단히 구현할 수 있다.

이 떄 이용할 수 있는 기능이 checkValidity와 reportValidity이다. checkValidity는 오류 메시지를 보여주기 않고 reportValidity는 서식의 전송 버튼을 누른 것 처럼 오류메시지를 표시하지만 서식 전송은 하지 않는다. 이를 이용해서 필수 입력 사항을 모두 기입했는지 서식 단위로 확인이 가능하다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Form checkValidity</title>
</head>
<body>
	<form>
		<p>
			<label>
				<input type="checkbox" required> (required) agreement1
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" required> (required) agreement2
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox"> (optional) agreement3
			</label>
		</p>
		<p>
			<button disabled>confirm</button>
		</p>
	</form>
	<script>
		const form = document.querySelector('form');
		const submit = document.querySelector('button');
		form.addEventListener('input', event => {
			submit.disabled = !form.checkValidity()
		});
	</script>
</body>
</html>

required가 지정된 체크박스 두개가 체크되어야만 전송 버튼을 활성화하는 기능을 개별 체크박스 확인 없이 서식 레벨로 간단하게 구현할 수 있다. 여기에 이름이나 이메일 같은 다른 입력값이 추가되더라도 입력 요소의 속성만 잘 붙여주면 추가 코드 없이 작동한다.

단, 이러한 방식은 명시적인 오류 메시지를 보여주지 않기 때문에 '이메일 형식이 잘 못 되었습니다.' 같은 오류 메시지를 추가하는 것을 고려해 봐야 한다. 전송 버튼이 활성화되지 않는 이유를 쉽게 추측할 수 있는 간단한 서식에서 유용할 것으로 생각된다.