Problem Statement
Why do we add the novalidate attribute and how do we trigger custom validation feedback?
Explanation
The novalidate attribute disables the browser’s built-in validation messages. This allows you to use Bootstrap’s consistent feedback styling instead.
On submit, run checkValidity() on the form. If it fails, prevent the submission and add the class .was-validated to reveal Bootstrap’s feedback messages.
Code Solution
SolutionRead Only
const form = document.querySelector('form');
form.addEventListener('submit', e => {
if (!form.checkValidity()) { e.preventDefault(); }
form.classList.add('was-validated');
});