잘못된 이벤트
예시
입력 필드가 유효하지 않은 경우 일부 텍스트 경고:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
oninvalid 이벤트는 제출 가능한 <input> 요소가 유효하지 않을 때 발생합니다.
예를 들어, 필수 속성이 설정되고 필드가 비어 있는 경우 입력 필드는 유효하지 않습니다(필수 속성은 양식을 제출하기 전에 입력 필드를 채워야 함을 지정합니다).
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Event | |||||
|---|---|---|---|---|---|
| oninvalid | Yes | 10.0 | Yes | Yes | Yes |
통사론
HTML:
<element oninvalid="myScript">
자바스크립트:
object.oninvalid = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("invalid", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
| 거품: | 아니 |
|---|---|
| 취소 가능: | 네 |
| 이벤트 유형: | 이벤트 |
| 지원되는 HTML 태그: | <입력> |
| DOM 버전: | 레벨 3 이벤트 |
더 많은 예
예시
입력 필드에 6자 미만의 문자가 포함된 경우 일부 텍스트 경고:
Name: <input type="text" id="myInput" name="fname" pattern=".{6,}"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Must contain 6 or more characters");
}
</script>
예시
입력 필드에 2보다 작거나 5보다 큰 숫자가 포함된 경우 일부 텍스트에 경고합니다.
Number: <input type="number" id="myInput" name="quantity" min="2" max="5"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>
관련 페이지
JavaScript 튜토리얼: JavaScript 양식