เหตุการณ์ oninvalid
การระบุและการใช้งาน
เกิดเหตุการณ์ oninvalid ขึ้นเมื่อส่วนประกอบ <input> ที่สามารถส่งได้ไม่ถูกต้อง
เช่นเดียวกับถ้าตั้งค่าคุณสมบัติ required และสูตรฟอร์มว่าง ตัวแปลงที่ใส่ข้อมูลไม่ถูกต้อง (คุณสมบัติ required กำหนดให้ตัวแปลงต้องถูกบันทึกก่อนการส่งฟอร์ม)
Instance
Example 1
If the input field is invalid, prompt some text:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
More TIY examples are at the bottom of the page.
Syntax
In HTML:
<element oninvalid="myScript">
In JavaScript:
object.oninvalid = function(){myScript};
In JavaScript, use the addEventListener() method:
object.addEventListener("invalid", myScript);
Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.
Technical details
| Bubble: | Not supported |
|---|---|
| Cancelable: | Support |
| Event type: | Event |
| Supported HTML tags: | <input> |
| DOM version: | Level 3 Events |
Browser support
The numbers in the table indicate the first browser version that fully supports the event.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninvalid | Support | 10.0 | Support | Support | Support |
More examples
Example 2
If the input field contains fewer than 6 characters, prompt some text:
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>
Example 3
If the input field contains a number less than 2 or greater than 5, prompt some text:
Number: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("คุณต้องเลือกตัวเลขระหว่าง 2 และ 5. คุณเลือก: " + this.value);
}
</script>
