CSS cung cấp nhiều pseudo-class giúp nhà phát triển kiểm soát và áp dụng kiểu dáng cho các phần tử dựa trên trạng thái của chúng. Một trong những pseudo-class đặc biệt hữu ích khi làm việc với các biểu mẫu (form) là :invalid. Pseudo-class này giúp áp dụng kiểu dáng cho các phần tử nhập liệu mà giá trị của chúng không hợp lệ dựa trên các quy tắc xác thực (validation rules) định sẵn.
Cách Hoạt Động của :invalid Pseudo-Class
Khi bạn sử dụng :invalid, nó sẽ tự động chọn các phần tử nhập liệu như <input>, <textarea>, và <select> mà giá trị không hợp lệ. Các phần tử này có thể không hợp lệ do nhiều nguyên nhân khác nhau, ví dụ như:
- Giá trị của chúng không nằm trong phạm vi hợp lệ.
- Giá trị không khớp với định dạng yêu cầu (sử dụng regex).
- Phần tử nhập liệu bị bỏ trống khi trường được đặt là bắt buộc (
required).
Ví Dụ Minh Họa
Dưới đây là ví dụ cơ bản về cách sử dụng pseudo-class :invalid để thay đổi kiểu dáng của các phần tử không hợp lệ trong form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<style>
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid green;
}
</style>
</head>
<body>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Tuổi:</label>
<input type="number" id="age" name="age" min="18" max="100" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
Trong ví dụ này, các trường nhập liệu sẽ có đường viền màu đỏ nếu không hợp lệ và màu xanh khi hợp lệ. Trường email phải tuân theo định dạng email hợp lệ (example@domain.com), và trường tuổi phải nằm trong khoảng từ 18 đến 100.
Tích Hợp Nâng Cao với JavaScript
Bạn cũng có thể kết hợp CSS với JavaScript để kiểm soát mạnh mẽ hơn các tình huống xác thực phức tạp. JavaScript cung cấp các phương thức và thuộc tính như checkValidity() và setCustomValidity() giúp bạn kiểm soát trạng thái hợp lệ của các trường nhập liệu và hiển thị thông điệp lỗi tùy chỉnh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Form Validation</title>
<style>
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid green;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,10}" required>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
let usernameInput = document.getElementById('username');
if (!usernameInput.checkValidity()) {
usernameInput.setCustomValidity('Username must be 5-10 characters long and contain only letters and numbers.');
usernameInput.reportValidity();
event.preventDefault(); // Prevent form submission
} else {
usernameInput.setCustomValidity(''); // Clear any custom error message
}
});
</script>
</body>
</html>
Trong ví dụ nâng cao này, JavaScript được sử dụng để tạo thông báo lỗi tùy chỉnh nếu trường nhập liệu không tuân theo mẫu xác định. setCustomValidity() được sử dụng để đặt thông điệp lỗi tùy chỉnh, và reportValidity() để hiển thị nó cho người dùng.
Kết Luận
Sử dụng :invalid pseudo-class trong CSS giúp bạn dễ dàng xác định và tạo giao diện người dùng trực quan hơn bằng cách làm nổi bật các trường không hợp lệ. Kết hợp với JavaScript, bạn có thể đạt được mức độ kiểm soát và tính tùy biến cao hơn trong việc xử lý xác thực form, đảm bảo người dùng nhập dữ liệu hợp lệ và theo đúng định dạng yêu cầu.
Comments