HTML5 checkValidity() 메서드란?
HTML5의 checkValidity() 메서드는 폼 컨트롤(input, select, textarea 등)의 값이 유효성 검사 제약 조건을 만족하는지 확인하는 자바스크립트 API입니다. 요소의 값이 min, max, required, pattern 같은 제약 조건을 모두 통과하면 true를 반환하고, 하나라도 위반하면 false를 반환합니다.
이 메서드는 별도의 외부 검증 라이브러리 없이도 기본적인 폼 유효성 검사를 구현할 수 있게 해주며, 클라이언트 측에서 빠르게 사용자 입력을 검증할 때 유용하게 활용됩니다.
브라우저 지원 현황
checkValidity() 메서드는 Google Chrome과 Opera에서 정상적으로 작동하며, 현재는 Firefox, Safari, Edge 등 대부분의 주요 최신 브라우저에서도 안정적으로 지원됩니다. 따라서 크로스 브라우징 환경에서도 폼 유효성 검사 로직을 일관되게 적용할 수 있습니다.
실습 예제 코드
아래 예제는 숫자 입력 필드에 min=4 제약 조건을 설정하고, 사용자가 값을 입력할 때마다 실시간으로 유효성을 검사한 뒤 그 결과를 화면과 콘솔에 함께 표시합니다.
<!DOCTYPE html>
<html>
<body>
<style>
.valid { color: #0B7866; }
.invalid { color: #C0392B; }
</style>
<div id="result"></div>
<script>
function check(input) {
var out = document.getElementById('result');
if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML = "<span class='valid'>" + input.id + " valid</span>";
} else {
out.innerHTML = "<span class='invalid'>" + input.id + " not valid</span>";
}
}
console.log(input.checkValidity());
};
</script>
<form id="testform" onsubmit="return false;">
<label>최소값:
<input oninput="check(this)" id="min_input" type=number min=4 />
</label><br>
</form>
</body>
</html>
코드 동작 방식
- oninput="check(this)": 입력 필드에 값이 입력될 때마다 check() 함수가 호출되어 실시간 검증이 이루어집니다.
- input.validity.valid: ValidityState 객체의 valid 속성으로, 해당 요소가 모든 제약 조건을 통과했는지 여부를 불리언 값으로 나타냅니다.
- 결과 표시: 값이 유효하면 초록 계열의 'valid' 스타일로 "valid" 메시지를, 유효하지 않으면 붉은 계열의 'invalid' 스타일로 "not valid" 메시지를 출력합니다.
- console.log(input.checkValidity()): 개발자 도구 콘솔에 true/false 반환값을 기록하여 디버깅에 활용할 수 있습니다.
실행 결과 예시
입력 필드에 4보다 작은 값(예: 2)을 입력하면 min 제약 조건을 위반하여 valid 속성이 false가 되고 "min_input not valid"라는 메시지가 표시됩니다. 반대로 4 이상의 값을 입력하면 "min_input valid" 메시지가 나타나며, 콘솔에는 각각 false 또는 true가 기록됩니다.
정리
checkValidity() 메서드와 validity 속성을 활용하면 HTML5의 기본 제약 조건 검증 기능을 자바스크립트로 손쉽게 제어할 수 있습니다. 서버 전송 전에 클라이언트 측에서 1차 유효성 검사를 수행함으로써 사용자 경험을 개선하고 불필요한 요청을 줄일 수 있다는 점에서, 실무 폼 개발 시 꼭 알아두면 좋은 기능입니다.