BS5 Form Validation

Validation States

Validation states `.is-valid` and `.is-invalid` provide visual cues for input correctness, paired with `.valid-feedback` or `.invalid-feedback` for explanatory messages. These styles create immediate, clear feedback that helps users correct mistakes before submitting forms. Valid inputs typically show green styling, while invalid ones use red, aligning with universal color conventions. This system enhances form usability, accessibility, and professionalism, making it easier for users to complete forms accurately and efficiently across all devices and interaction contexts.

🔸 Valid State

<div class="mb-3">
    <label for="validInput" class="form-label">Valid Input</label>
    <input type="text" class="form-control is-valid" id="validInput" value="Correct data" required>
    <div class="valid-feedback">
        Looks good!
    </div>
</div>

🔸 Invalid State

<div class="mb-3">
    <label for="invalidInput" class="form-label">Invalid Input</label>
    <input type="text" class="form-control is-invalid" id="invalidInput" required>
    <div class="invalid-feedback">
        Please provide a valid input.
    </div>
</div>

🔹 Browser Default Validation

Browser default validation uses HTML5 attributes like `required`, `type`, and `pattern` to enforce input rules without JavaScript, offering simple, built-in error messaging. While easy to implement, this method lacks consistent styling across browsers and limited customization options. It works well for basic forms where native behavior is sufficient, but falls short for complex validation needs or branded interfaces. Understanding its limitations helps developers choose when to rely on native validation versus custom JavaScript solutions for better control and user experience.

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" required>
    </div>
    <div class="mb-3">
        <label for="age" class="form-label">Age</label>
        <input type="number" class="form-control" id="age" min="18" max="100" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

🔹 Custom Validation with JavaScript

Custom validation with JavaScript provides full control over validation logic, timing, and feedback styling, using Bootstrap's `.needs-validation` and `.was-validated` classes. This approach ensures consistent, branded validation across all browsers, with customizable error messages and interactive behaviors. Developers can implement complex rules, asynchronous checks, and dynamic feedback, creating more robust and user-friendly forms. It is essential for professional applications, e-commerce checkouts, or any scenario requiring precise, reliable validation beyond basic HTML5 capabilities.

<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" id="username" required>
        <div class="invalid-feedback">
            Please choose a username.
        </div>
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" minlength="6" required>
        <div class="invalid-feedback">
            Password must be at least 6 characters.
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

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

🔹 Validation with Tooltips

Validation tooltips display feedback as popovers near inputs using `.valid-tooltip` or `.invalid-tooltip`, saving vertical space and creating a cleaner layout. The parent container needs `position: relative` for proper placement. This method is ideal for compact forms, inline validations, or interfaces where maintaining minimal vertical footprint is crucial. Tooltips provide concise, contextual messages without disrupting form flow, enhancing visual appeal while ensuring users receive clear guidance for correcting input errors efficiently.

<form class="needs-validation" novalidate>
    <div class="mb-3 position-relative">
        <label for="tooltipUsername" class="form-label">Username</label>
        <input type="text" class="form-control" id="tooltipUsername" required>
        <div class="invalid-tooltip">
            Please enter a username.
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

🔹 Validation for Select and Textarea

Boost form usability and accessibility by applying validation consistently across select dropdowns and textareas. Use Bootstrap’s validation classes like .is-valid and .is-invalid to style these elements, paired with clear feedback messages (.valid-feedback or .invalid-feedback). This ensures a uniform user experience, improves error communication, and helps meet WCAG guidelines. Consistent validation styling across all input types—text fields, selects, and textareas—reduces user confusion, increases form completion rates, and enhances overall interface professionalism and trustworthiness.

<div class="mb-3">
    <label for="validSelect" class="form-label">Select</label>
    <select class="form-select is-invalid" id="validSelect" required>
        <option value="">Choose...</option>
        <option value="1">Option 1</option>
    </select>
    <div class="invalid-feedback">
        Please select an option.
    </div>
</div>

<div class="mb-3">
    <label for="validTextarea" class="form-label">Textarea</label>
    <textarea class="form-control is-invalid" id="validTextarea" required></textarea>
    <div class="invalid-feedback">
        Please enter a message.
    </div>
</div>