oninvalid 이벤트란 무엇인가?
oninvalid 이벤트는 <input> 필드에 입력된 값이 유효성 검사를 통과하지 못했을 때, 즉 값이 잘못되었거나 필수 항목이 비어 있을 때 발생합니다.
예를 들어 사용자가 폼 제출 버튼을 누르기 전에 필수 입력란을 채우지 않은 경우, oninvalid 이벤트를 활용하면 "폼을 먼저 작성해 주세요"와 같은 안내 메시지를 즉시 표시할 수 있습니다. 이를 통해 사용자에게 명확한 피드백을 제공하고, 폼 작성 경험을 크게 개선할 수 있습니다.
주요 활용 사례
- 필수 입력란 검증: required 속성이 지정된 input이 비어 있을 때 알림 표시
- 형식 오류 안내: 이메일, 전화번호 등 형식이 맞지 않을 때 사용자에게 즉각적인 피드백 제공
- 커스텀 에러 메시지: 브라우저 기본 오류 메시지 대신 원하는 문구로 대체 가능
구현 예제
아래 코드를 실행하면 JavaScript에서 oninvalid 이벤트를 어떻게 구현하는지 직접 확인할 수 있습니다. 이름 입력란이 비어 있는 상태에서 제출 버튼을 클릭하면 경고창이 나타납니다.
<!DOCTYPE html>
<html>
<body>
<script>
function resetFunct() {
alert("The form was reset");
}
</script>
<form>
Enter Name: <input type="text"
required oninvalid = "alert('Fill the form before submitting!');" > <br>
Enter birth month: <input type= "text"> <br>
<input type = "submit">
<input type = "reset">
</form>
</body>
</html>코드 설명
- 이름 입력란에는 required 속성이 설정되어 있어, 값이 비어 있으면 유효성 검사에 실패합니다.
- 유효성 검사에 실패하는 순간 oninvalid 속성에 지정된 자바스크립트 코드가 실행되어 'Fill the form before submitting!'이라는 경고창이 표시됩니다.
- 출생 월 입력란에는 required 속성이 없으므로 비워 두어도 오류가 발생하지 않습니다.
정리
oninvalid 이벤트는 HTML5 폼 유효성 검사와 함께 사용하는 강력한 도구입니다. 별도의 복잡한 검증 로직 없이도 필수 항목 누락이나 형식 오류 상황에서 사용자에게 즉각적인 안내 메시지를 제공할 수 있으므로, 폼 UX를 개선하고자 할 때 적극적으로 활용해 보시기 바랍니다.