Bootstrap form validation uses built-in styles to show valid/invalid states with visual feedback. 1. Add novalidate to disable browser tooltips. 2. Use needs-validation for real-time feedback or was-validated after submission. 3. Include HTML5 validation attributes like required. 4. Display error messages in invalid-feedback elements. 5. Apply was-validated via JavaScript on form submission to trigger styling. 6. Optionally, use JavaScript to manually add is-valid or is-invalid for custom validation. Always pair with backend validation for security, use semantic input types, and ensure accessibility. This approach ensures clean, responsive, and accessible forms.

Bootstrap form validation is a built-in feature in Bootstrap 5 that helps you provide visual feedback when users fill out forms incorrectly or correctly. It works best with HTML5 form validation attributes (like required, pattern, etc.) and integrates well with JavaScript for custom logic.

Here’s how to use Bootstrap form validation properly:

? Enable Bootstrap Validation Styles

Bootstrap provides two states:

• Invalid (red border and icon) — when input fails validation
• Valid (green border and checkmark) — when input passes

These styles are applied automatically when you use the was-validated class on the form and :valid / :invalid pseudo-classes on inputs.

Step 1: Add novalidate to the form

This disables the browser's default popup tooltips and lets Bootstrap handle the styling.

<form class="row g-3 needs-validation" novalidate>

? Use needs-validation if you want real-time feedback without submitting. Use was-validated after submission to show errors.

? HTML Structure with Validation

<form class="row g-3 needs-validation" novalidate>
  

    First Name
    
    

      Please enter your first name.
    
  

  

    Email
    
    

      Please provide a valid email.
    
  

  

    Submit
  

? The invalid-feedback message only appears when the field is invalid and the form has been submitted (or marked as validated). ? Always include required, minlength, or other validation attributes.

? When to Show Errors: Use was-validated

To show validation styles only after the user tries to submit, add the was-validated class via JavaScript.

const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
});

Now:

• On submit, if any field fails, the browser prevents submission.
• The was-validated class triggers Bootstrap’s error styling.
• invalid-feedback messages become visible.

? Optional: Real-Time Validation (without was-validated)

If you want instant feedback as the user types, remove was-validated and use needs-validation. You can manually trigger validation on input:

document.querySelectorAll('.form-control').forEach(input => {
  input.addEventListener('input', () => {
    if (input.checkValidity()) {
      input.classList.remove('is-invalid');
      input.classList.add('is-valid');
    } else {
      input.classList.remove('is-valid');
      input.classList.add('is-invalid');
    }
  });
});

Then use is-valid and is-invalid classes manually or rely on CSS pseudo-classes.

? Tips & Best Practices

• Always include accessible error messages inside invalid-feedback or valid-feedback.
• Use semantic HTML5 input types (email, tel, url, etc.) for better client-side validation.
• Test on mobile — some validations behave differently.
• Combine with backend validation — never rely solely on frontend checks.

? Example: Custom JS Validation with Bootstrap Styling

const form = document.getElementById('myForm');

form.addEventListener('submit', function (e) {
  e.preventDefault();

  // Custom logic
  const email = document.getElementById('email');
  const emailValue = email.value;

  if (!emailValue.includes('@')) {
    email.classList.remove('is-valid');
    email.classList.add('is-invalid');
  } else {
    email.classList.remove('is-invalid');
    email.classList.add('is-valid');
  }

  // Only submit if all fields are valid
  if (form.checkValidity() && email.classList.contains('is-valid')) {
    alert('Form submitted!');
    form.reset();
    form.classList.remove('was-validated');
  } else {
    form.classList.add('was-validated');
  }
});

Basically, Bootstrap handles the visuals — you just need to:

1. Use required or other validation attributes
2. Add novalidate to avoid browser popups
3. Use was-validated after submission
4. Show invalid-feedback messages

That’s it. Clean, accessible, and responsive.

The above is the detailed content of How to use Bootstrap form validation?. For more information, please follow other related articles on the PHP Chinese website!