Lesson 37: Form Validation in Bootstrap 5

Form validation provides valuable feedback to the user. In this Bootstrap tutorial, let's learn how to add validation to forms in Bootstrap 5 !

Form verification

You can use different validation classes to provide valuable feedback to the user. Add .was-validatedor .needs-validationto the element , depending on whether you want to provide validation feedback before or after submitting the form. Input fields will have a green (valid) or red (invalid) border to indicate missing information in the form.

You can also add messages .valid-feedbackor .invalid-feedbacklet users know exactly what is missing or needs to be completed before submitting the form.

Essentially, the code below adds validation to a form using Bootstrap 5. The sample code .was-validatedshows what information needs to be filled in before submitting the form:

 Username: Valid. Please fill out this field. Password: Valid. Please fill out this field. I agree on blabla. Valid. Check this checkbox to continue. Submit 

For example:

 Bootstrap Example 

Form verification

For example, if you submit a form but haven't filled in all the information, you will receive a notification like the one below.

 Tên người dùng: Hợp lệ. Điền đầy đủ thông tin. Mật khẩu: Hợp lệ. Điền đầy đủ thông tin. Đồng ý với chính sách sử dụng của TipsMake.com.com. Hợp lệ. Tích box này để tiếp tục. Đăng nhập 

The above is how to add form validation or the Validation attribute to a Form in Bootstrap 5. Hopefully, this article is helpful to you.