HTMLInputElement: sự kiện invalid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
Sự kiện invalid kích hoạt khi một phần tử có thể gửi đã được kiểm tra tính hợp lệ và không thỏa mãn các ràng buộc của nó.
Sự kiện này có thể hữu ích để hiển thị tóm tắt các vấn đề với biểu mẫu khi gửi. Khi một biểu mẫu được gửi, các sự kiện invalid được kích hoạt tại mỗi điều khiển biểu mẫu không hợp lệ. Tính hợp lệ của các phần tử có thể gửi được kiểm tra trước khi gửi <form> sở hữu chúng, hoặc sau khi phương thức checkValidity() của phần tử hoặc <form> sở hữu nó được gọi.
Nó không được kiểm tra khi blur.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("invalid", (event) => { })
oninvalid = (event) => { }
Loại sự kiện
Một Event chung.
Ví dụ
Nếu một biểu mẫu được gửi với giá trị không hợp lệ, các phần tử có thể gửi được kiểm tra và nếu tìm thấy lỗi, sự kiện invalid sẽ kích hoạt trên phần tử invalid. Trong ví dụ này, khi sự kiện invalid kích hoạt do giá trị không hợp lệ trong đầu vào, giá trị không hợp lệ được ghi lại.
HTML
<form action="#">
<div>
<label>
Nhập một số nguyên từ 1 đến 10:
<input type="number" min="1" max="10" required />
</label>
</div>
<div><input type="submit" value="gửi" /></div>
</form>
<hr />
Giá trị không hợp lệ:
<ul id="log"></ul>
JavaScript
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("invalid", (e) => {
log.appendChild(document.createElement("li")).textContent = JSON.stringify(
e.target.value,
);
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # event-invalid |
| HTML # handler-oninvalid |