Bootstrap Validation

Overview

Bootstrap provides client-side validation styles and feedback for forms.

Basic Validation

<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="validationCustom01" class="form-label">First name</label>
        <input type="text" class="form-control" id="validationCustom01" required>
        <div class="valid-feedback">
            Looks good!
        </div>
        <div class="invalid-feedback">
            Please provide a valid first name.
        </div>
    </div>
    
    <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
(function() {
    'use strict';
    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');
        }, false);
    });
})();
</script>

Validation States

<!-- 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 value">
    <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">
    <div class="invalid-feedback">
        Please provide a valid input.
    </div>
</div>

Supported Elements

<form class="was-validated">
    <!-- Text input -->
    <div class="mb-3">
        <label for="validationTextarea" class="form-label">Textarea</label>
        <textarea class="form-control" id="validationTextarea" required></textarea>
        <div class="invalid-feedback">
            Please enter a message.
        </div>
    </div>
    
    <!-- Checkbox -->
    <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
        <label class="form-check-label" for="validationFormCheck1">
            Check this checkbox
        </label>
        <div class="invalid-feedback">
            You must agree before submitting.
        </div>
    </div>
    
    <!-- Select -->
    <div class="mb-3">
        <select class="form-select" required>
            <option value="">Choose...</option>
            <option value="1">One</option>
        </select>
        <div class="invalid-feedback">
            Please select a valid option.
        </div>
    </div>
    
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

Next Steps

Congratulations! You've completed the Bootstrap tutorial.

Return to Home →