Sự kiện oninvalid
Định nghĩa và cách sử dụng
Sự kiện oninvalid xảy ra khi phần tử <input> có thể gửi không hợp lệ.
Ví dụ, nếu đã thiết lập thuộc tính required và trường trống, thì trường nhập liệu không hợp lệ (thuộc tính required chỉ định trường nhập liệu phải được điền trước khi gửi biểu mẫu).
Mô hình
Ví dụ 1
Nếu trường nhập không hợp lệ, thì hiển thị một đoạn văn bản:
<input type="text" oninvalid="alert('Bạn phải điền biểu mẫu!');" required>
Dưới trang này có nhiều ví dụ TIY khác.
Cú pháp
Trong HTML:
<element oninvalid="myScript">
Trong JavaScript:
object.oninvalid = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener():
object.addEventListener("invalid", myScript);
Ghi chú:Internet Explorer 8 hoặc các phiên bản trước không hỗ trợ phương thức addEventListener().
Chi tiết kỹ thuật
| Nổi bubbles: | Không hỗ trợ |
|---|---|
| Có thể hủy bỏ: | Hỗ trợ |
| Loại sự kiện: | Sự kiện |
| Các thẻ HTML được hỗ trợ: | <input> |
| Phiên bản DOM: | Sự kiện Level 3 |
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này hoàn toàn.
| Sự kiện | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninvalid | Hỗ trợ | 10.0 | Hỗ trợ | Hỗ trợ | Hỗ trợ |
Những ví dụ khác
Ví dụ 2
Nếu trường nhập chứa ít hơn 6 ký tự, thì hiển thị một đoạn văn bản:
Tên: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Phải chứa 6 hoặc nhiều ký tự");
}
</script>
Ví dụ 3
Nếu trường nhập chứa số nhỏ hơn 2 hoặc lớn hơn 5, thì hiển thị một đoạn văn bản:
Số: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Bạn phải chọn một số từ 2 đến 5. Bạn đã chọn: " + this.value);
}
</script>
