Using jQuery
you could do the following:
$['#numberinput'].get[0].setCustomValidity['The two email addresses must match.'];
And not:
$['#numberinput'].val[""].setCustomValidity['The two email addresses must match.'];
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, passwordphải khớp với giá trị regular expressionSelect a file smaller than 75 kB :
0range, number, date, month, week, datetime, datetime-local, timegiá trị phải lớn hơn hoặc bằng giá trị Select a file smaller than 75 kB :
0Select a file smaller than 75 kB :
2range, number, date, month, week, datetime, datetime-local, timegiá trị phải nhỏ hơn hoặc bằng giá trị Select a file smaller than 75 kB :
2Select a file smaller than 75 kB :
4text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file, select, textareabắt buộc phải có giá trịSelect a file smaller than 75 kB :
5text, search, url, tel, email, password, textareasố ký tự nhập vào phải thỏa lớn hơn hoặc bằng Select a file smaller than 75 kB :
5Select a file smaller than 75 kB :
7text, search, url, tel, email, password, textareasố ký tự nhập vào phải thỏa nhỏ hơn hoặc bằng Select a file smaller than 75 kB :
7Ví 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
Select a file smaller than 75 kB :
9 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à 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[""];
}
0 và 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[""];
}
1 để format gọi Select a file smaller than 75 kB :
9 hoặc 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[""];
}
3 trên thằng form Khi form được submit bằng click ‘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[""];
}
4 hoặc ấn enterLưu ý
- Nếu set novalidate trên thẻ
5, là chúng ta bỏ qua hết việc validatefunction 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[""]; }
- Khi gọi
6 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ệnfunction 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[""]; }
7 của nút submitfunction 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[""]; }
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ư
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[""];
}
8, rồi trigger một đoạn javascript để validate, sau đó dùng phương thức 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[""];
}
9 để 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 userGiới hạn file size khi upload
Select a file smaller than 75 kB :
Dùng javascript để đọc file được chọn,
window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
0, so sánh kích thước này rồi trả về kết quả cho trình duyệtfunction 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
window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
1 và window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
2 để trỏ đến các element nào có thuộc tính Select a file smaller than 75 kB :
4 hoặc khônginput:required {
border: red;
}
input:optional {
border: blue;
}
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[""];
}
0 và 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[""];
}
1 trên các element bị/không bị lỗiinput:valid {
border: black;
}
input:invalid {
border: red;
}
Để thay đổi nội dung câu thông báo, sử dụng
window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
6 trên các element: window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
7, window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
8, window.onload = function [] {
document.getElementById["FS"].onchange = checkFileSize;
}
9, input:required {
border: red;
}
input:optional {
border: blue;
}
0, input:required {
border: red;
}
input:optional {
border: blue;
}
1, input:required {
border: red;
}
input:optional {
border: blue;
}
2