Hướng dẫn validate html5

Bài này nằm trong loạt bài chuẩn kiến thức để đi thi web mobile specialist của Google. Một số cách validate bằng HTML, sử dụng API kết hợp với javascript để custom lại theo ý muốn

Chúng ta cùng điểm qua các attribute mà HTML5 cung cấp để validate

type

Ngoài giá trị text, chúng ta sẽ có thêm

• email: chỉ cho phép nhập địa chỉ email
• number: chỉ cho phép nhập số
• url: chỉ cho phép nhập dạng đường dẫn url
• tel: không nên xài, vì mỗi nước của một kiểu format số điện thoại riêng

  
  
  
  Gửi

required

Một attribute đơn giản nhất, truyền vào một giá trị boolean, bắt buộc user phải nhập giá trị nếu đang set true

  Cafe hay Trà Đá?
  
  Gửi

Dùng CSS selector :valid, :invalid để format cho element

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

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

minlength, maxlength, min, max

Với  chúng ta dùng min và max để đặt ràng buộc khoảng giá trị, các ,  còn lại dùng minlength và maxlength

  

    từ 3 đến 6 ký tự
    
  
  

    Từ 1 đến 10
    
  
  

    Gửi
  

CSS selector cho giá trị của element :in-range, :out-of-range

input:out-of-range {
  border: 2px solid red;
}

input:in-range {
  border: 2px solid black;
}

pattern

Truyền vào một regular expression, chỉ có trên , không sử dụng được với 

  Bạn chỉ có thể nhập "cherry" hoặc "banana"
  
  Gửi

Ví dụ một số regular expression hay xài

Số điện thoại Việt Nam

Chỉ gồm số và chữ

Giá trị Hex Color như #3b5998 hoặc #000.

Gợi ý

Sử dụng title để hiển thị một tooltip cho user biết chúng ta muốn user nhập vào giá trị gì

Customize câu hiển thị lỗi

Khi element invalid, nó sẽ hiện một câu thông báo kèm theo trên element, cái này phụ thuộc vào từng trình duyệt, không thể chỉnh lại bằng CSS, trình duyệt đang set ngôn ngữ gì thì nó hiển thị câu lỗi bằng ngôn ngữ đó, không đi theo ngôn ngữ khai báo của trang web.

Để thay đổi nội dung của câu thông báo, chúng ta buộc phải dùng javascript

Khá nhiều trình duyệt hiện tại cung cấp API để làm việc với validation, để đối phó với các trình duyệt cũ thì tất nhiên chúng ta dùng đến polyfill như Hyperform

Chúng ta cùng làm thử một custom error.

Đầu tiên là html

  

    
      Vui lòng nhập địa chỉ email:
      
      
    
  
  Gửi

Chúng ta khai báo novalidate để tắt validate của trình duyệt.

Javascript sử dụng API của trình duyệt để tương tác với validate của HTML5

var form  = document.getElementsByTagName['form'][0];
var email = document.getElementById['mail'];
var error = document.querySelector['.error'];

email.addEventListener["input", function [event] {
  // kiểm tra khi user bắt đầu nhập
  if [email.validity.valid] {
    // nếu valid, remove
    error.innerHTML = ""; 
    error.className = "error"; 
  }
}, false];

form.addEventListener["submit", function [event] {
  // kiểm tra khi user click submit.
  if [!email.validity.valid] {
    error.innerHTML = "Baby à, cho anh địa chỉ email chứ";
    error.className = "error active";
    // chặn việc submit form
    event.preventDefault[];
  }
}, false];

Demo

TopDev via Vuilaptrinh