How can I disable native HTML validation and use Bootstrap JS only?
Asked on Jul 15, 2025
1 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:
✅ Answered with Bootstrap 5 best practices.- Use the `novalidate` attribute on the `
- 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.