How can I disable native HTML validation and use Bootstrap JS only?

Asked on Jul 15, 2025

Answer

To disable native HTML validation and use only Bootstrap's JavaScript validation, you need to set the `novalidate` attribute on your form element. This prevents the browser's default validation, allowing you to rely solely on Bootstrap's custom validation styles and scripts.

<!-- BEGIN COPY / PASTE -->
        <form class="needs-validation" novalidate>
            <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="email" required>
                <div class="invalid-feedback">
                    Please enter a valid email.
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
        <script>
            // Bootstrap 5 custom validation
            (function () {
                'use strict';
                var forms = document.querySelectorAll('.needs-validation');
                Array.prototype.slice.call(forms).forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            })();
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `novalidate` attribute on the `
` element to disable the browser's native validation.
Add the `needs-validation` class to the form to apply Bootstrap's validation styles.
Use JavaScript to add the `was-validated` class after form submission to show validation feedback.
Ensure that each input field has the `required` attribute and appropriate feedback elements for custom validation messages.

✅ Answered with Bootstrap 5 best practices.