HTML cung cấp validation tích hợp sẵn qua các attribute, nên trình duyệt chặn các lần submit không hợp lệ và hiển thị thông báo — không cần JavaScript.
html
Submit
HTML cung cấp validation tích hợp sẵn qua các attribute, nên trình duyệt chặn các lần submit không hợp lệ và hiển thị thông báo — không cần JavaScript.
Submit
Các attribute validation: required, min/max, minlength/maxlength, pattern (regex), và bản thân type (email, url, number). Khi submit, trình duyệt kiểm tra chúng, dừng việc submit nếu có cái nào thất bại, và hiển thị một bong bóng native trên field không hợp lệ đầu tiên.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* chỉ sau khi người dùng đã tương tác — UX dễ chịu hơn */
Bạn có thể đọc và tùy chỉnh validation trong JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true nếu required và rỗng
input.validity.typeMismatch; // true nếu định dạng email/url sai
input.checkValidity(); // trả về boolean, kích hoạt sự kiện invalid
input.setCustomValidity("Passwords don't match"); // thông báo lỗi tùy chỉnh
setCustomValidity cho phép bạn thêm các quy tắc mà attribute không diễn đạt được (ví dụ "xác nhận mật khẩu khớp").
<form novalidate>...</form> <!-- bỏ qua validation native (xử lý bằng JS) -->
Luôn validate cả ở server — validation phía client là vì UX; người dùng có thể vượt qua nó.
Validation native cho bạn thông báo lỗi có accessibility, đã được bản địa hóa và phản hồi tức thì miễn phí.
Kết hợp các attribute khai báo với Constraint Validation API cho các quy tắc tùy chỉnh — nhưng đừng bao giờ tin nó là tuyến phòng thủ duy nhất; server phải validate luôn.