Chọn phần tử nhập có giá trị hợp lệ - :valid - trong CSS

CSS là một ngôn ngữ không thể thiếu trong việc xây dựng và thiết kế giao diện web. Một trong những tính năng mạnh mẽ nhưng ít được biết đến của CSS chính là việc xác định trạng thái hợp lệ của các phần tử đầu vào trong form. Thuộc tính giả :valid chính là công cụ giúp ta thực hiện điều này.

Tầm quan trọng của việc kiểm tra tính hợp lệ

Trước khi đi sâu vào chi tiết của :valid, hãy hiểu tại sao việc kiểm tra tính hợp lệ lại quan trọng. Trong một website hoặc ứng dụng web, dữ liệu người dùng nhập phải được kiểm tra để đảm bảo tính chính xác và an toàn. Nếu người dùng nhập dữ liệu không hợp lệ, hệ thống có thể gặp các vấn đề như bảo mật, thông tin sai lệch hoặc crash ứng dụng.

Cách :valid hoạt động

CSS cung cấp pseudo-class :valid để chọn các phần tử đầu vào có giá trị hợp lệ dựa trên các tiêu chuẩn mà bạn đã định nghĩa. Giả sử bạn có một form đăng ký, phần tử đầu vào (input) có thể bị xác định là hợp lệ hoặc không hợp lệ dựa trên các quy tắc như kiểu dữ liệu, chiều dài ký tự, hoặc thậm chí là mẫu (pattern).

<form>
  <input type="email" required>
  <input type="text" pattern="^\d{10}$" required>
  <button type="submit">Submit</button>
</form>

Trong ví dụ trên, phần tử đầu vào đầu tiên yêu cầu người dùng phải nhập một địa chỉ email hợp lệ. Phần tử thứ hai yêu cầu người dùng nhập vào một chuỗi chữ số có độ dài 10 ký tự. Nếu cả hai phần tử này đều có dữ liệu hợp lệ, chúng sẽ bị :valid chọn lựa.

Sử dụng :valid trong CSS

Một khi đã hiểu cách :valid xác định các phần tử đầu vào hợp lệ, ta có thể sử dụng nó để thêm các kiểu dáng (styles) nhằm cải thiện giao diện người dùng. Dưới đây là một ví dụ cơ bản:

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

Với đoạn mã CSS trên, nếu phần tử đầu vào có giá trị hợp lệ nó sẽ có viền màu xanh lá, ngược lại nếu không hợp lệ, viền sẽ chuyển sang màu đỏ. Điều này giúp người dùng dễ dàng nhận biết tình trạng của dữ liệu mình nhập vào.

Mở rộng :valid với JavaScript

Mặc dù :valid rất hữu ích, nhưng đôi khi bạn cần thêm các xử lý phức tạp mà CSS đơn thuần không thể làm được. Kết hợp CSS và JavaScript có thể là giải pháp tối ưu.

Dưới đây là một ví dụ về cách kết hợp :valid với JavaScript để hiển thị thông báo lỗi tùy chỉnh:

<form id="signupForm">
  <input type="email" id="emailInput" required>
  <span id="emailError" style="display: none; color: red;">Email không hợp lệ</span>
  <button type="submit">Submit</button>
</form>

<script>
  const emailInput = document.getElementById('emailInput');
  const emailError = document.getElementById('emailError');
  
  emailInput.addEventListener('input', () => {
    if (emailInput.validity.valid) {
      emailError.style.display = 'none';
    } else {
      emailError.style.display = 'block';
    }
  });
</script>

Trong đoạn mã này, khi người dùng nhập liệu, JavaScript sẽ kiểm tra tính hợp lệ của đầu vào. Nếu dữ liệu nhập vào hợp lệ, thông báo lỗi sẽ được ẩn đi, ngược lại, thông báo lỗi sẽ được hiển thị.

Kết luận

Thuộc tính giả :valid trong CSS là một công cụ mạnh mẽ giúp kiểm tra và xác định các phần tử đầu vào có giá trị hợp lệ. Việc sử dụng :valid không chỉ giúp cải thiện trải nghiệm người dùng mà còn đảm bảo dữ liệu nhập vào tuân thủ các quy tắc đã đặt ra. Kết hợp :valid với CSS và JavaScript sẽ giúp bạn xây dựng các forms mạnh mẽ và tương tác hơn, từ đó tăng tính an toàn và hiệu quả của ứng dụng web.