HTML oninvalid 속성이란?
HTML에서 요소가 유효하지 않을 때, 즉 폼 유효성 검사에 실패했을 때 스크립트를 실행하려면 oninvalid 속성을 사용하면 됩니다.
oninvalid는 HTML5에서 새롭게 도입된 이벤트 속성입니다. 사용자가 required 필드를 비워둔 채 제출하거나, 입력값이 지정된 형식(이메일 주소, 숫자 범위 등)을 만족하지 못해 폼 제출이 거부되는 순간 자동으로 발생합니다. 주로 <input>, <textarea>, <select> 같은 폼 요소와 함께 사용되며, 안내 메시지를 표시하거나 특정 동작을 수행하는 데 유용하게 활용할 수 있습니다.
oninvalid 속성 예제
다음 코드를 실행하면 oninvalid 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 학생 ID 입력란을 비운 상태에서 제출 버튼을 누르면 유효성 검사가 실패하고 경고창(alert)이 나타납니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML oninvalid attribute</title>
</head>
<body>
<h2>ID</h2>
<form action="/new.php">
<input type="text" placeholder="Student ID" name="sname" oninvalid="alert('Fill it first!')" required /><br>
<input type="submit" value="Submit">
</form>
</body>
</html>코드 설명
- required : 해당 입력 필드를 필수 항목으로 지정합니다. 값이 비어 있으면 폼 제출이 차단됩니다.
- oninvalid : 유효성 검사에 실패하는 순간 지정된 JavaScript 코드가 실행됩니다. 위 예제에서는 'Fill it first!'라는 경고 메시지를 띄웁니다.
- alert() : 사용자에게 즉각적인 피드백을 전달하는 가장 간단한 방법입니다.
마무리
oninvalid 속성을 활용하면 별도의 JavaScript 이벤트 리스너를 등록하지 않고도 유효성 검사 실패 시점에 원하는 스크립트를 손쉽게 실행할 수 있습니다. 더 나은 사용자 경험을 위해 alert 대신 인라인 오류 메시지나 커스텀 스타일을 적용하는 방식으로 확장해 보는 것도 좋은 방법입니다.