This question explores Bootstrap and addresses practical considerations related to: How do I hook into the validation API to prevent submission until valid?

How do I hook into the validation API to prevent submission until valid?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I hook into the validation API to prevent submission until valid?

Asked on Jul 05, 2025

Answer

Previous Question Next Question

To prevent form submission until it is valid using Bootstrap 5's validation API, you can use JavaScript to check the form's validity and prevent submission if it is invalid. Here's a simple example to demonstrate this.

<!-- BEGIN COPY / PASTE -->
        <form id="myForm" class="needs-validation" novalidate>
            <div class="mb-3">
                <label for="exampleInput" class="form-label">Example input</label>
                <input type="text" class="form-control" id="exampleInput" required>
                <div class="invalid-feedback">
                    Please provide a valid input.
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>

        <script>
            (function () {
                'use strict';
                var form = document.getElementById('myForm');
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            })();
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

The `novalidate` attribute is used to disable the browser's default validation.
The `needs-validation` class is used to apply Bootstrap's custom validation styles.
JavaScript checks the form's validity using `checkValidity()`.
If the form is invalid, `event.preventDefault()` and `event.stopPropagation()` prevent form submission.
The `was-validated` class is added to show validation feedback.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I hook into the validation API to prevent submission until valid?

Asked on Jul 05, 2025

Answer

Real Questions. Clear Answers.