❮ Previous Next ❯

Custom Validation

  • Implement personalized validation feedback in Bootstrap forms.

  • Introduction to Custom Validation Messages

    Validation is not only about checking correctness, but also about communicating clearly with users.

    Default browser validation messages:

    • Are inconsistent across browsers

    • Are often unclear or technical

    • Cannot be customized easily

    • Do not match application UI

    In Bootstrap 5, custom validation messages allow developers to:

    • Control what message is shown

    • Match UI design and tone

    • Improve clarity and user experience

    • Guide users to fix errors quickly

    What Are Custom Validation Messages ?

    Custom validation messages are developer-defined messages that appear when:

    • A field is invalid

    • A required value is missing

    • Input format is incorrect

    Instead of relying on browser popups, Bootstrap displays messages inline, close to the input field.

    Why Custom Validation Messages Are Important

    Custom messages improve forms because they:

    • Explain what went wrong

    • Explain how to fix it

    • Reduce user frustration

    • Increase form completion rate

    • Look professional and consistent

    Bad message:

    “Invalid input”

    Good message:

    “Please enter a valid email address (example@domain.com)”

    How Bootstrap Handles Validation Messages

    Important concept:

    Bootstrap does not validate input

    Bootstrap only styles validation states and messages

    Bootstrap uses:

    • HTML validation attributes (required, type, etc.)

    • CSS classes (.is-valid, .is-invalid)

    • Feedback containers (.valid-feedback, .invalid-feedback)

Disabling Default Browser Validation Messages

The novalidate attribute disables the browser’s default validation messages to allow custom validation styles. 

<form class="needs-validation" novalidate>

  • Explanation:

    • novalidate → disables browser popups1

    • .needs-validation → tells Bootstrap validation will be used

Displaying Custom Validation Messages in Forms

Bootstrap uses .valid-feedback and .invalid-feedback to display custom validation messages for form inputs. 

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" required>
    <div class="invalid-feedback">
      Please enter a valid email address.
    </div>
    <div class="valid-feedback">
      Email looks good!
    </div>
  </div>
  <button class="btn btn-primary">Submit</button>
</form>

  • What Happens

    • If input is empty or invalid → custom error message appears

    • If input is valid → success message appears

    • Messages appear inline, not as popups

Enabling Bootstrap Custom Validation with JavaScript

This script activates Bootstrap’s custom validation styles when the form is submitted. 

<script>
  (() => {
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      });
    });
  })();
</script>

  • Explanation

    • checkValidity() → checks HTML validity

    • Prevents submission if invalid

    • .was-validated → triggers Bootstrap styles

    • Feedback messages become visible

Showing Custom Validation Messages for Different Inputs

Different inputs can display specific validation messages using .invalid-feedback. 

<!-- Required Field Message -->
<input class="form-control" required>
<div class="invalid-feedback">
  This field is required.
</div>

<!-- Email Format Message -->
<input type="email" class="form-control" required>
<div class="invalid-feedback">
  Please enter a valid email address.
</div>

<!-- Minimum Length Message -->
<input type="password" class="form-control" minlength="6" required>
<div class="invalid-feedback">
  Password must be at least 6 characters long.
</div>
  • Custom Messages with Select Dropdown

Adding Custom Validation Messages to Select Dropdowns

Use .invalid-feedback to display validation messages when a required dropdown is not selected. 

<select class="form-select" required>
  <option value="">Choose...</option>
  <option>India</option>
  <option>USA</option>
</select>
<div class="invalid-feedback">
  Please select a country.
</div>

  • This ensures dropdowns also show clear error messages.

    Manually Controlling Validation States

    Sometimes validation logic comes from JavaScript or server response.

Manually Setting Validation States for Form Inputs

The .is-invalid and .is-valid classes allow manual control of validation states and messages. 

<!-- Manually Invalid Input -->
<input class="form-control is-invalid">
<div class="invalid-feedback">
  Username already exists.
</div>

<!-- Manually Valid Input -->
<input class="form-control is-valid">
<div class="valid-feedback">
  Username is available.
</div>

  • Used in:

    • AJAX validation

    • Server-side validation feedback

    Accessibility and Custom Messages

    Custom validation messages:

    • Are readable by screen readers

    • Are associated with the input

    • Appear near the error location

    Best practices:

    • Keep messages short

    • Be specific

    • Avoid technical language

    • Do not rely only on color

       Common Mistakes

      • Forgetting novalidate

      • Not adding .was-validated

      • Writing vague error messages

      • Using alerts instead of inline feedback

      • Showing multiple messages for one error

        Best Practices for Custom Validation Messages

        • One clear message per error

        • Explain how to fix the error

        • Keep tone polite and helpful

        • Stay consistent across the form

        • Never expose backend logic

      ❮ Previous Next ❯