:valid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Lớp giả :valid trong CSS đại diện cho bất kỳ phần tử <input> hoặc phần tử <form> khác có nội dung kiểm tra hợp lệ thành công. Điều này cho phép dễ dàng tạo kiểu cho các trường hợp lệ theo cách giúp người dùng xác nhận rằng dữ liệu của họ được định dạng đúng.
Try it
label {
display: block;
margin-top: 1em;
}
input:valid {
background-color: ivory;
border: none;
outline: 2px solid deepskyblue;
border-radius: 5px;
accent-color: gold;
}
<form>
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" value="na@me@example.com" />
<label for="secret">Secret Code: (lower case letters)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
<label for="age">Your age: (18+)</label>
<input id="age" name="age" type="number" value="5" min="18" />
<label
><input name="tos" type="checkbox" required checked /> - Do you agree to
ToS?</label
>
</form>
Lớp giả này hữu ích để làm nổi bật các trường đúng cho người dùng.
Cú pháp
:valid {
/* ... */
}
Khả năng tiếp cận
Màu xanh lá thường được dùng để chỉ đầu vào hợp lệ. Những người mắc một số dạng mù màu sẽ không thể xác định trạng thái của đầu vào trừ khi có thêm chỉ báo không phụ thuộc vào màu sắc. Thông thường, văn bản mô tả và/hoặc biểu tượng được sử dụng cho mục đích này.
Ví dụ
Chỉ báo trường biểu mẫu hợp lệ và không hợp lệ
Trong ví dụ này, chúng ta thêm các phần tử <span> để tạo nội dung chỉ báo dữ liệu hợp lệ hoặc không hợp lệ:
<form>
<fieldset>
<legend>Feedback form</legend>
<p>Required fields are labelled with "required".</p>
<div>
<label for="fname">First name: </label>
<input id="fname" name="fname" type="text" required />
<span></span>
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" name="lname" type="text" required />
<span></span>
</div>
<div>
<label for="email">
Email address (include if you want a response):
</label>
<input id="email" name="email" type="email" />
<span></span>
</div>
<div><button>Submit</button></div>
</fieldset>
</form>
Để cung cấp các chỉ báo này, chúng ta sử dụng CSS sau:
input + span {
position: relative;
}
input + span::before {
position: absolute;
right: -20px;
top: 5px;
}
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: "✖";
color: red;
}
input:valid + span::before {
content: "✓";
color: green;
}
Chúng ta đặt các <span> thành position: relative để có thể định vị nội dung được tạo ra so với chúng. Sau đó, chúng ta định vị tuyệt đối các nội dung khác nhau tùy thuộc vào việc dữ liệu biểu mẫu hợp lệ hay không hợp lệ — dấu tích xanh hoặc dấu X đỏ tương ứng. Để thêm tính cấp thiết cho dữ liệu không hợp lệ, chúng ta cũng tạo viền đỏ đậm cho các đầu vào khi không hợp lệ.
Note:
Chúng ta đã sử dụng ::before để thêm các nhãn này vì đã sử dụng ::after cho nhãn "required".
Bạn có thể thử bên dưới:
Lưu ý rằng các đầu vào văn bản bắt buộc không hợp lệ khi trống, nhưng hợp lệ khi có nội dung. Ngược lại, đầu vào email hợp lệ khi trống vì không bắt buộc, nhưng không hợp lệ khi chứa nội dung không phải địa chỉ email đúng định dạng.
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Khả năng tương thích trình duyệt
Xem thêm
- Các lớp giả liên quan đến kiểm tra hợp lệ khác:
:required,:optional,:invalid - Kiểm tra hợp lệ dữ liệu biểu mẫu
- Truy cập trạng thái hợp lệ từ JavaScript