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 typeNgoài giá trị 
requiredMột attribute đơn giản nhất, truyền vào một giá trị Dùng CSS selector input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}minlength, maxlength, min, maxVới CSS selector cho giá trị của element input:out-of-range {
border: 2px solid red;
}
input:in-range {
border: 2px solid black;
}patternTruyền vào một regular expression, chỉ có trên 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ư Gợi ýSử dụng Customize câu hiển thị lỗiKhi 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 Chúng ta khai báo 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);DemoTopDev via Vuilaptrinh |
