Trong một trang web, việc đảm bảo dữ liệu nhập vào từ người dùng phải chính xác và hợp lệ là vô cùng quan trọng. Là một framework rất được tin dùng trong thiết kế website, Bootstrap 5 cung cấp một cách đơn giản để thêm xác thực vào các biểu mẫu của bạn bằng cách sử dụng các lớp CSS và JavaScript. Bài viết này sẽ hướng dẫn bạn cách sử dụng tính năng này với các ví dụ và code mẫu.

1. Cách thức hoạt động

Bootstrap sử dụng hai lớp giả CSS: :invalid và :valid để áp dụng các kiểu cho các trường hợp hợp lệ và không hợp lệ của các phần tử đầu vào. Lớp .was-validated được áp dụng cho phần tử biểu mẫu để kích hoạt xác thực.

Ví dụ:

<form class="was-validated">
  <div class="mb-3">
    <label for="name" class="form-label">Tên</label>
    <input type="text" class="form-control" id="name" name="name" required>
    <div class="invalid-feedback">
      Vui lòng nhập tên của bạn.
    </div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" required>
    <div class="invalid-feedback">
      Vui lòng nhập địa chỉ email hợp lệ.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Gửi</button>
</form>

Kết quả:

Vui lòng nhập tên của bạn.
Vui lòng nhập địa chỉ email hợp lệ.

Trong ví dụ này chúng ta sử dụng các thuộc tính required để xác định các trường bắt buộc. Khi người dùng gửi biểu mẫu, các trường không hợp lệ sẽ được tô sáng bằng màu đỏ và hiển thị thông báo lỗi.

>>>>> Xem thêm bài viết tương tự tại đây:

2. Kiểm tra nâng cao

Ngoài các thuộc tính HTML, chúng ta cũng có thể sử dụng JavaScript để thực hiện các kiểm tra xác thực nâng cao hơn. Ví dụ, để có thể kiểm tra xem mật khẩu có khớp nhau hay không hoặc đảm bảo rằng người dùng nhập đúng mã ZIP.

Dưới đây là ví dụ về cách sử dụng JavaScript để kiểm tra mật khẩu:

const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
confirmPasswordInput.addEventListener('input', () => {
  if (passwordInput.value !== confirmPasswordInput.value) {
    confirmPasswordInput.classList.add('is-invalid');
    confirmPasswordInput.setCustomValidity('Mật khẩu không khớp');
  } else {
    confirmPasswordInput.classList.remove('is-invalid');
    confirmPasswordInput.setCustomValidity('');
  }
});

3. Kiểu xác thực

Bootstrap 5 cung cấp các kiểu xác thực tích hợp sẵn cho các trường hợp phổ biến:

  • Hợp lệ: Trường hợp hợp lệ được hiển thị với đường viền màu xanh lá cây và thông báo "Hợp lệ".
  • Không hợp lệ: Trường hợp không hợp lệ được hiển thị với đường viền màu đỏ và thông báo lỗi.
  • Cảnh báo: Trường hợp cảnh báo được hiển thị với đường viền màu vàng và thông báo cảnh báo.

4. Tùy chỉnh thông báo

Bạn có thể tùy chỉnh thông báo xác thực bằng cách sử dụng các thuộc tính title và aria-describedby.

  • title: Thuộc tính này hiển thị một công cụ trợ giúp khi người dùng di chuột qua trường.
  • aria-describedby: Thuộc tính này liên kết trường với một phần tử khác chứa thông báo chi tiết.

Ví dụ:

<div class="mb-3">
  <label for="name" class="form-label">Tên</label>
  <input type="text" class="form-control" id="name" name="name" required title="Vui lòng nhập tên của bạn">
  <div class="invalid-feedback" aria-describedby="name-error">
    Vui lòng nhập tên của bạn.
  </div>
  <div id="name-error" class="visually-hidden">
    Tên của bạn phải dài ít nhất 2 ký tự.
  </div>
</div>

5. Sử dụng JavaScript

Bạn có thể sử dụng JavaScript để kiểm tra xác thực nâng cao hơn và hiển thị thông báo tùy chỉnh.

Ví dụ:

const nameInput = document.getElementById('name');
nameInput.addEventListener('input', () => {
  if (nameInput.value.length < 2) {
    nameInput.classList.add('is-invalid');
    nameInput.setCustomValidity('Tên phải dài ít nhất 2 ký tự');
  } else {
    nameInput.classList.remove('is-invalid');
    nameInput.setCustomValidity('');
  }
});

6. Thư viện JavaScript

Bạn có thể sử dụng các thư viện JavaScript như jQuery Validation để đơn giản hóa việc viết mã xác thực.

Ví dụ:

$(document).ready(function() {
  $('#form').validate({
    rules: {
      name: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      name: {
        required: "Vui lòng nhập tên của bạn",
        minlength: "Tên phải dài ít nhất 2 ký tự"
      },
      email: {
        required: "Vui lòng nhập địa chỉ email",
        email: "Vui lòng nhập địa chỉ email hợp lệ"
      }
    }
  });
});

Kết luận

Xác thực biểu mẫu trong Bootstrap 5 là một cách đơn giản và hiệu quả để đảm bảo rằng người dùng nhập dữ liệu hợp lệ vào biểu mẫu của bạn. Bài viết này đã cung cấp cho bạn các ví dụ và code mẫu để bắt đầu với form validate trong bootstrap 5. Hẹn gặp lại bạn ở các bài viết khác của Stringee tại đây.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom