Bài 37: Form Validation trong Bootstrap 5
Form Validation hay xác thực biểu mẫu cung cấp phản hồi giá trị có người dùng. Ở bài học cách dùng Bootstrap này, hãy cùng nhau tìm hiểu cách thêm Validation vào Form trong Bootstrap 5 như thế nào nhé!
Xác thực biểu mẫu
Bạn có thể dùng các class xác thực khác nhau để cung cấp phản hồi có giá trị tới người dùng. Thêm .was-validated
hoặc .needs-validation
vào phần tử <form>
, phụ 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á (hợp lệ) hoặc đỏ (không hợp lệ) để cho biết thông tin đang bị 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 chính xác nội dung còn thiếu hay cần phải hoàn thành trước khi gửi biểu mẫu.
Về cơ bản, code thêm xác thực vào biểu mẫu bằng Bootstrap 5 như dưới đây. Code mẫu dùng .was-validated
để chỉ ra nội dung cần điền 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>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Xác thực biểu mẫu</h3>
<p>Ví dụ bạn gửi biểu mẫu nhưng chưa điền hết thông tin thì sẽ nhận được thông báo như bên dưới.</p>
<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="Nhập tên người dùng" name="uname" required>
<div class="valid-feedback">Hợp lệ.</div>
<div class="invalid-feedback">Điền đầy đủ thông tin.</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="Enter password" name="pswd" required>
<div class="valid-feedback">Hợp lệ.</div>
<div class="invalid-feedback">Điền đầy đủ thông tin.</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">Đồng ý với chính sách sử dụng của Quantrimang.com.</label>
<div class="valid-feedback">Hợp lệ.</div>
<div class="invalid-feedback">Tích box này để tiếp tục.</div>
</div>
<button type="submit" class="btn btn-primary">Đăng nhập</button>
</form>
</div>
</body>
</html>
Trên đây là cách thêm xác thực biểu mẫu hay thuộc tính Validation vào Form trong Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
Bài 32: Menu lựa chọn trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 34: Range trong Bootstrap 5
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
-
Bài 35: Input Group trong Bootstrap 5
-
Bài 36: Form Floating Label trong Bootstrap 5
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/2020/06/15/hoc-bootstrap-200-size-24x24-znd.png)
Cũ vẫn chất
-
Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -
Stt cho những đêm tâm trạng không ngủ được
Hôm qua -
44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -
C++ Editor Online
Hôm qua -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
Những câu stt hay tâm trạng về lặng nhìn cuộc sống
Hôm qua -
Code Hello Cafe VNG mới nhất và cách nhập code
2 ngày -
Cách chuyển dữ liệu giữa các máy tính
2 ngày -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua