Adding form validation

Bootstrap 5 has form validation as one of its features, so we want to take advantage of that for some of our forms: the newsletter form on the Home page, the contact form on the Contact page, and the two forms in the Shipping Details and Payment Options tabs on the Cart page.

The first thing we need to do is to add an id attribute to all of our form elements, so we can use that to target them from our JavaScript code. Additionally, we need to add the novalidate attribute to the form elements, which is used to disable the browser default feedback tooltips, while still providing access to form validation through JavaScript. So, we need to make the following updates to our markup:

part-2/chapter-9/website/index.html line 306

<form class="text-white" id="newsletterForm" novalidate>

part-2/chapter-9/website/contact.html line 185

<form id="contactForm" novalidate>

part-2/chapter-9/website/cart.html line 172...