네, HTML5의 checkValidity() 메서드는 Google Chrome과 Opera에서 정상적으로 작동합니다. 사실 이 메서드는 현재 사용되는 대부분의 모던 브라우저(Chrome, Firefox, Edge, Safari, Opera 등)에서 폭넓게 지원되고 있으므로 안심하고 사용해도 됩니다.
checkValidity() 메서드란?
checkValidity()는 폼 요소의 값이 설정된 유효성 검사 규칙(min, max, required, pattern 등)을 만족하는지 확인하고, 그 결과를 true 또는 false로 반환하는 메서드입니다. 값이 유효하지 않으면 브라우저의 내장 유효성 검사 오류가 발생하며, validity 속성을 통해 상세한 오류 상태를 함께 확인할 수 있습니다.
예제 코드
다음 예제는 입력 필드에 값이 입력될 때마다 해당 값이 최솟값 조건(min=4)을 만족하는지 실시간으로 검사합니다.
<!DOCTYPE html>
<html>
<body>
<style>
.valid {
color: #0B7866;
}
.invalid {
color: #0B6877;
}
</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>Minimum:
<input oninput="check(this)" id="min_input" type="number" min="4" />
</label><br>
</form>
</body>
</html>코드 설명
이 코드에서는 oninput 이벤트를 통해 입력값이 변경될 때마다 check() 함수가 호출됩니다. 함수 내부에서는 먼저 input.validity 속성의 존재 여부를 확인한 뒤, input.validity.valid 값이 true인 경우 결과 영역에 초록색 "valid" 메시지를, 그렇지 않은 경우 "not valid" 메시지를 표시합니다.
또한 콘솔에는 checkValidity()의 반환값(true/false)이 출력되므로, 개발자 도구를 통해 유효성 검사 결과를 손쉽게 확인할 수 있습니다. 이처럼 checkValidity()와 validity 속성을 활용하면 별도의 외부 라이브러리 없이도 간단하고 효율적인 클라이언트 측 폼 유효성 검사를 구현할 수 있습니다.