Bootstrap 5 Kiểm tra biểu mẫu

Xác minh biểu mẫu

Bạn có thể sử dụng các lớp xác minh khác nhau để cung cấp phản hồi có giá trị cho người dùng. Vui lòng thêm .was-validated hoặc .needs-validation thêm 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 minh trước khi gửi biểu mẫu hay sau khi gửi. .valid-feedback hoặc .invalid-feedback thông báo, để thông báo rõ ràng cho người dùng điều gì đã bị thiếu hoặc cần hoàn thành trước khi gửi biểu mẫu.

mô hình

Trong ví dụ này, chúng ta sử dụng .was-validated Hãy chỉ ra điều gì còn thiếu:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Tên người dùng:</label>
    <input type="text" class="form-control" id="uname" placeholder="Vui lòng nhập tên người dùng" name="uname" required>
    <div class="valid-feedback">Hợp lệ.</div>
    <div class="invalid-feedback">Vui lòng điền trường này.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Mật khẩu:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Vui lòng nhập mật khẩu" name="pswd" required>
    <div class="valid-feedback">Hợp lệ.</div>
    <div class="invalid-feedback">Vui lòng điền trường này.</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">Tôi đồng ý với các điều khoản này.</label>
    <div class="valid-feedback">Hợp lệ.</div>
    <div class="invalid-feedback">Chọn hộp kiểm này để tiếp tục.</div>
  </div>
  <button type="submit" class="btn btn-primary">Gửi</button>
</form>

Thử ngay