- Trang chủ
- Tutorials
- HTML
- HTML cơ bản
Bạn có thể yêu cầu các trường biểu mẫu cụ thể để người dùng của bạn không thể gửi biểu mẫu của bạn cho đến khi người đó điền họ.
Ví dụ: Nếu bạn muốn tạo trường nhập văn bản bắt buộc, bạn chỉ có thể thêm thuộc tính required trong phần tử input của bạn, như sau:
Dĩ nhiên là sau này chúng ta sẽ xử lý form bằng Javascript. Nhưng hiện tại chúng ta sử dụng HTML5 thuần túy.
Bài tập
Hãy nhập tạo một trường nhập văn bản bắt buộc để người dùng của bạn không thể gửi biểu mẫu mà không hoàn thành trường này.
Sau đó, hãy thử gửi biểu mẫu mà không cần nhập bất kỳ văn bản nào. Xem cách biểu mẫu HTML5 của bạn thông báo cho bạn rằng đây là trường là bắt buộc nhập?
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
Bài viết được sự cho phép của tác giả Lưu Bình An Vì form quá phức tạp, chúng ta cần thêm một bài viết nữa về validation với html. Với HTML5 chúng ta có một số kiểu input để validate những giá trị mà user đưa vào, ko cần tự viết javascript để check, chỉ đơn giản là khai báo mấy cái attribute, trường hợp phức tạp hơn, chúng ta có thể can thiệp trong cái Validation API để có kết quả mong muốn
Luôn nhớ validate ở phía client không có nghĩa là ko cần đến validate ở server.
Một vài ràng buộc phổ biến
Dùng kiểu input : bắt buộc là giá trị email
: bắt buộc là giá trị url
Dùng attribute khác
pattern
| text, search, url, tel, email, password | phải khớp với giá trị regular expression |
min
| range, number, date, month, week, datetime, datetime-local, time | giá trị phải lớn hơn hoặc bằng giá trị min
|
max
| range, number, date, month, week, datetime, datetime-local, time | giá trị phải nhỏ hơn hoặc bằng giá trị max
|
required
| text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file, select, textarea | bắt buộc phải có giá trị |
minlength
| text, search, url, tel, email, password, textarea | số ký tự nhập vào phải thỏa lớn hơn hoặc bằng minlength
|
maxlength
| text, search, url, tel, email, password, textarea | số ký tự nhập vào phải thỏa nhỏ hơn hoặc bằng maxlength
|
Ví dụ
Enter username [upper and lowercase letters]:
Submit
Quá trình validate dữ liệu
Quá trình này sẽ thông qua bộ Validation API, nó có thể là trên cả form hoặc trên từng element trong form. Được thực hiện bằng một trong các cách sau bằng cách gọi checkValidity[]
của các element input, select, button, textarea. Nó sẽ chỉ validate dữ liệu trên element đó thôi. Nó thường được thực hiện bởi trình duyệt, sau đó chúng ta dùng selector của CSS là :valid
và :invalid
để
format gọi checkValidity[]
hoặc reportValidity[]
trên thằng form Khi form được submit bằng click ‘hoặc ‘
hoặc ấn enter
Lưu ý
- Nếu set novalidate trên thẻ
, là chúng ta bỏ qua hết việc validate
- Khi gọi
submit[]
trên form, không trigger validation, phương thức này sẽ gửi hết dữ liệu của form lên server dù nó có hay không thỏa điều kiện. Nên gọi sự kiệnclick[]
của nút submit
Can thiệp vào quá trình validate bằng bộ Validation API
Ý tưởng chính là bắt một sự kiện nào đó trên element như onchange
, rồi trigger một đoạn javascript để validate, sau đó dùng phương thức field.setCustomValidity[]
để set kết quả validate: nếu là String rỗng nghĩa là ok, còn ngược lại là error, đoạn string này sẽ đem đi hiển thị như thông báo error cho user
Giới hạn file size khi upload
Select a file smaller than 75 kB :
Dùng javascript để đọc file được chọn, FIle.size[]
, so sánh kích thước này rồi trả về kết quả cho trình duyệt
function checkFileSize[] {
var FS = document.getElementById["FS"];
var files = FS.files;
// Nếu có ít nhất 1 file được chọn
if [files.length > 0] {
if [files[0].size > 75 * 1024] { // kiểm tra size
FS.setCustomValidity["The selected file must not be larger than 75 kB"];
return;
}
}
// Không có file, ko check.
FS.setCustomValidity[""];
}
Hook cái phương thức này vào trong sự kiện mong muốn
window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
Hiển thị validation
Dùng :required
và :optional
để trỏ đến các element nào có thuộc tính required
hoặc không
input:required {
border: red;
}
input:optional {
border: blue;
}
:valid
và :invalid
trên các element bị/không bị lỗi
input:valid {
border: black;
}
input:invalid {
border: red;
}
Để thay đổi nội dung câu thông báo, sử dụng element.setCustomValidity['thông báo']
trên các element: ,
,
,
,
,
const nameInput = document.querySelector['input'];
const form = document.querySelector['form'];
nameInput.addEventListener['input', [] => {
nameInput.setCustomValidity[''];
nameInput.checkValidity[];
}];
nameInput.addEventListener['invalid', [] => {
if[nameInput.value === ''] {
nameInput.setCustomValidity['Enter your username!'];
} else {
nameInput.setCustomValidity['Usernames can only contain upper and lowercase letters. Try again!'];
}
}];
Constraint validation
Bài viết gốc được đăng tải tại vuilaptrinh.com
Có thể bạn quan tâm:
- Chỉ dẫn thiết kế form từ Google
- Stateless là gì? Stateful là gì?
- Tìm hiểu validate form với HTML5
Xem thêm các việc làm Developer hấp dẫn tại TopDev