Validation dựng sẵn chạy khi submit, không cần JS:
html
<form>
<input name="email" type="email" required>
<input name="age" type="number" min="18" max="99" step="1">
<input name="user" pattern="[a-z0-9_]{3,16}" title="3–16 ký tự thường, số hoặc _">
<input name="bio" maxlength="200" minlength="10">
<button>Gửi</button>
</form>| Attribute | Áp cho |
|---|---|
required | mọi control |
pattern | text, tel, email, url, password, search |
min / max / step | number, range, date/time |
minlength / maxlength | các kiểu nhập chữ |
Style theo trạng thái bằng pseudo-class:
css
input:user-invalid { border-color: var(--rose-ink); } /* chỉ đỏ SAU khi user rời field */
input:valid { border-color: var(--green); }Lưu ý 1: :invalid bôi đỏ ngay khi trang vừa mở vì field rỗng đã là invalid. Dùng :user-invalid (hoặc tự thêm class sau blur) mới đúng trải nghiệm.
Lưu ý 2: pattern không dùng cờ regex và luôn được neo hai đầu — không cần ^...$.
Chốt: validation HTML chỉ để phản hồi nhanh cho người dùng; server vẫn phải kiểm tra lại toàn bộ.