HTML5 서식은 다양한 기능을 제공해서 과거에 자바스크립트로 구현해야만 했던 기능을 HTML에 속성을 추가하는 방식으로 대체 할 수 있다. 그중에 단연 유용한 기능은 서식 유효성 검사이다. 덕분에 나도 회사 내부용 관리 도구는 유효성 검사를 HTML5 기능만 사용해 만들어 왔다.

하지만 미려한 디자인이 요구된다든가 제공되는 기능만으로는 원하는 기능을 만들 수 없을 때에는 HTML 기능은 배제하고 자바스크립트로 기능을 만들어 왔다. 간만에 바닐라로 기능 구현할 기회가 생겨서 HTML 시맨틱을 유지하면서 커스텀 기능을 넣을 수 있는지 궁금해서 찾아봤다.

처음에는 서식의 submit 이벤트에서 유효성 정보를 확인할 수 있지 않을까 싶었는데 유효성에 관련된 정보는 각 입력 요소에 나눠서 들어 있고 유효하지 않을 경우 invalide 이벤트를 발생시킨다. 통상 submit 이벤트에서 유효성 검사를 할 때에는 오류가 많아도 처음 걸린 오류 하나만 보여주는 식으로 많이 구현했었는데 각 입력 요소에서 이벤트가 발생하다보니 모든 오류를 한번에 쉽게 보여 줄 수 있다.

document.querySelector('input').addEventListener('invalid', event => {
  console.log(event.target.validity);
});

유효성 정보는 입력 요소의 validity 속성에 들어 있고 여러가지 오류 정보를 가지고 있다. 예를 들어 required 속성을 사용했는데 값이 입력되지 않았을 경우에는 validity.valueMissing 값이 false가 된다.

badInput: true,         // 값이 type과 맞지 않는 경우(number)
customError: true,      // setCustomValidity로 오류가 지정된 경우
patternMismatch: true,  // 값이 pattern과 맞지 않는 경우
rangeOverflow: true,    // 값이 max보다 클 경우
rangeUnderflow: true,   // 값이 min보다 작을 경우
stepMismatch: true,     // 값이 step과 맞지 않을 경우
tooLong: true,          // 값의 길이가 maxLength보다 클 경우
tooShort: true,         // 값의 길이가 minLingeh보다 작을 경우
typeMismatch: true,     // 값이 type과 맞지 않을 경우(email, url)
valid: true,            // 오류가 있는 경우
valueMissing: true      // required인데 값이 없는 경우

type에 따른 오류가 badInput과 typeMismatch로 나눠져 있는데 후자는 email과 url에 관련이 있다고 한다.

각 오류의 종류에 따라 브라우저가 자체 UI로 오류 메시지를 보여주는데 이 메시지를 변경하고 싶으면 setCustomValidity()로 입력 요소에 내가 원하는 메시지를 지정할 수 있다. pattern과 같이 사용하면 보다 상세한 설명을 사용자에게 제공할 수 있다.

event.target.setCustomValidity('이름에 숫자는 사용할 수 없습니다.');

setCustomValidity()로 메시지를 지정하면 서식이 전송되지 않고 오류 메시지가 표시되고 서식이 전송되게 하려면 오류 메시지를 빈 문자열로 지정하면 된다. 입력 요소에 지정하는 것이기 때문에 invalid 이벤트 외에 input이나 blur 이벤트에서 지정을 하고 서식 전송을 원하는 대로 제어할 수 있다.

document.querySelector('input').addEventListener('invalid', event => {
  event.preventDefault();
});

이게 본론인데 메시지 뿐만 아니라 기본 UI 까지 재구성 하려면 preventDefault로 invalid 이벤트의 기본 동작을 막으면 된다. invalid 이벤트 동작을 막아도 오류가 있으면 서식은 전송이 되지 않는다. 이 상태로 validity의 다양한 상태를 사용해서 기존에 자바스크립트로 구현하듯이 오류 메시지 표시나 스타일 정보를 변경해주면 점진적 향상의 방법으로 서식 유효성 검사를 구현할 수 있다. 나같은 경우 과거에 data-* 속성으로 어떻게 검증할지를 정보를 넣고는 했었는데 그보다 HTML 표준을 사용하면 더 이해가 쉬운 코드를 작성할 수 있다.

:valid {
  border-color: #0c0;
}
:invalid {
  border-color: #c00;
}

CSS로도 :valid나 :invalid로 스타일을 적용할 수 있다. 비슷한 용도로 :required나 :optional도 사용할 수 있다. 한가지 유념할 것은 CSS 가상 클래스의 경우 사용자가 서식을 사용하지도 않았는데 이미 오류로 표시되기 때문에 사용자가 입력을 시작했는지 검사를 하고 스타일을 적용해야 자연스럽게 구현이 가능하다.