oninvalidเหตุการณ์
ตัวอย่าง
แจ้งเตือนข้อความบางส่วนหากช่องป้อนข้อมูลไม่ถูกต้อง:
<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 ที่รองรับ: | <input> |
รุ่น 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