Xác thực mẫu Bootstrap 5
Xác thực mẫu
Bạn có thể sử dụng các lớp xác thực khác nhau để cung cấp phản hồi có giá trị cho người dùng. Thêm .was-validated
hoặc .needs-validation
vào phần tử <form>
, tùy thuộc vào việc bạn muốn cung cấp phản hồi xác thực trước hay sau khi gửi biểu mẫu. Các trường nhập sẽ có đường viền màu xanh lá cây (hợp lệ) hoặc màu đỏ (không hợp lệ) để cho biết nội dung còn thiếu trong biểu mẫu. Bạn cũng có thể thêm thông báo .valid-feedback
hoặc .invalid-feedback
để cho người dùng biết rõ ràng những gì còn thiếu hoặc cần phải làm trước khi gửi biểu mẫu.
Ví dụ
Trong ví dụ này, chúng tôi sử dụng .was-validated
để cho biết nội dung còn thiếu trước khi gửi biểu mẫu:
<form action="/action_page.php" class="was-validated">
<div
class="mb-3 mt-3">
<label for="uname"
class="form-label">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd"
class="form-label">Password:</label>
<input
type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd" required>
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mb-3">
<input
class="form-check-input" type="checkbox" id="myCheck" name="remember"
required>
<label class="form-check-label"
for="myCheck">I agree on blabla.</label>
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Hãy tự mình thử »