HTML oninvalid 이벤트 속성 완벽 가이드

HTML의 oninvalid 이벤트 속성은 폼(form)을 제출하는 시점에 입력 필드가 유효성 검사를 통과하지 못했을 때 자동으로 실행되는 이벤트 핸들러입니다. 예를 들어 required 속성이 지정된 필드가 비어 있는 상태로 제출되면, 브라우저가 기본 오류 메시지를 표시하기 전에 oninvalid 이벤트가 발생하여 개발자가 원하는 동작을 수행할 수 있습니다.

문법(Syntax)

oninvalid 속성의 기본 문법은 다음과 같습니다.

<tagname oninvalid="script"></tagname>

예제(Example)

아래는 HTML oninvalid 이벤트 속성을 활용한 실제 동작 예제입니다. textarea가 비어 있는 상태에서 폼을 제출하면 배경색이 변경되고 안내 문구가 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    textarea {
        border: 2px solid #fff;
        background: transparent;
        font-size: 1rem;
    }
    ::placeholder {
        color: #000;
        font-size: 1rem;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>HTML oninvalid Event Attribute Demo</h1>
<form action="" method="">
<textarea placeholder="Enter your message here" oninvalid="invalidFn()" rows='8' cols="50" required></textarea>
<input type="submit" value="SUBMIT" class="btn">
</form>
<p>Click on SUBMIT button without writing any message</p>
<script>
    function invalidFn() {
        document.querySelector('textarea').style.background = '#db133a6e';
        document.querySelector('textarea').setAttribute('placeholder', 'Please enter a message');
    }
</script>
</body>
</html>

실행 결과(Output)

HTML oninvalid 이벤트 속성 완벽 가이드 – 사용법과 예제

위 코드를 실행한 후, 텍스트 영역에 아무 내용도 입력하지 않은 채 SUBMIT 버튼을 클릭해 보세요. 그러면 oninvalid 속성이 어떻게 작동하는지 확인할 수 있습니다.

HTML oninvalid 이벤트 속성 완벽 가이드 – 사용법과 예제

동작 방식 정리

textarea에는 required 속성이 설정되어 있어 빈 값 제출 시 유효성 검사에 실패합니다.
유효성 검사 실패 순간 oninvalid="invalidFn()"에 의해 JavaScript 함수가 호출됩니다.
함수는 해당 요소의 배경색을 붉은 계열로 변경하고, placeholder 텍스트를 "Please enter a message"로 교체하여 사용자에게 입력을 유도합니다.

이처럼 oninvalid 이벤트 속성을 활용하면 브라우저 기본 오류 알림 대신, 디자인에 어울리는 맞춤형 피드백을 손쉽게 구현할 수 있습니다.