Tạo style trang trí phần lỗi nhập liệu trong Form với CSS

Trước đây, khi bắt lỗi nhập liệu trong form chúng ta thường được xử lý với JavaScript là chủ yếu. Nhưng hiện nay vói sự ra đời của HTML5 và CSS3 thì việc này đã trở nên dễ dàng hơn. Bằng cách sử dụng các pseudo-classes như :required, :optional, :valid kết hợp với các thuộc tính của HTML5 như: required, pattern cũng như kết hợp giá trị bên trong thuộc tính type của thẻ input như tel, text, email,…. Và tất nhiên các pseudo-classes hoạt động tốt với các thẻ input, textarea và các phần tử select.

Ví dụ đầu tiên

Chúng ta sẽ bắt đầu luôn với ví dụ dưới đây để xem nó hoạt động như thế nào:

<form action="#" class="simple-form">
  <input type="text" placeholder="First Name" required>
  <input type="email" placeholder="Email" required>
  <input type="text" placeholder="Nick name">
  <input type="text" placeholder="Favorite pizza toping">
</form>

Bây giờ style css bằng các sử dụng các pseudo-classes để xem nó thế nào đây.

.simple-form {
  display: flex;
  overflow-y: scroll;
  padding-bottom: 1.25rem;
}
.simple-form input {
  margin: 0 .25rem;
  min-awidth: 125px;
  border: 1px solid #eee;
  border-left: 3px solid;
  border-radius: 5px;
  transition: border-color .5s ease-out;
}
.simple-form input:optional {
  border-left-color: #999;
}
.simple-form input:required {
  border-left-color: palegreen;
}
.simple-form input:invalid {
  border-left-color: salmon;
}

Và đây là kết quả:

Với ô nhập liệu có type là email thì bạn cần phải nhập đúng định dạng thì mới thấy sự thay đổi của ô input

Thêm style lỗi nhập liệu khi người dùng nhập sai

Để tăng độ khó cho game chúng ta sẽ style cho để khi focus vào input thì chúng nó sẽ hiển thị biểu tượng nho nhỏ ở bên góc phải của ô input để làm dấu hiệu nhận biết là người dùng đã nhập liệu đúng hay chưa.

Chỉ cần thay đổi style một chút như thế này

.simple-form {
  display: flex;
  overflow-y: scroll;
  padding-bottom: 1.25rem;
}
.simple-form input {
  margin: 0 .25rem;
  min-awidth: 125px;
  border: 1px solid #eee;
  border-left: 3px solid;
  border-radius: 5px;
  transition: border-color .5s ease-out;
}
.simple-form input:optional {
  border-left-color: #999;
}
.simple-form input:required:valid {
  border-left-color: palegreen;
}
.simple-form input:invalid {
  border-left-color: salmon;
}
.simple-form input:required:focus:valid {
  background: url("/images/check.svg") no-repeat 95% 50%;
  background-size: 25px;
}
.simple-form input:focus:invalid {
  background: url("/images/tnt.svg") no-repeat 95% 50%;
  background-size: 45px;
}

Xem kết quả ở đây:

Như vậy là chúng ta đã hoàn thành rồi đấy. Ngoài ra các bạn có thể CSS thêm để form được trở nên trông bắt mắt hơn hoặc cũng có thể hiển thị các tooltip cảnh báo chẳng hạn.