javascript init

reservation.html

@@ -60,7 +60,7 @@
             <div class="col-md-6">
                 <h1 class="text-center mt-3">Search for Availability</h1>
 
-                <form action="reservation.html" method="get">
+                <form action="reservation.html" method="get" novalidate class="needs-validation">
                     <div class="row">
                         <div class="col mb-3">
                             <label for="start_date" class="form-label">Starting Date</label>
@@ -103,6 +103,27 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
+
+    <script>
+        (() => {
+            'use strict'
+
+            // Fetch all the forms we want to apply custom Bootstrap validation styles to
+            const forms = document.querySelectorAll('.needs-validation')
+
+            // Loop over them and prevent submission
+            Array.from(forms).forEach(form => {
+                form.addEventListener('submit', event => {
+                    if (!form.checkValidity()) {
+                        event.preventDefault()
+                        event.stopPropagation()
+                    }
+
+                    form.classList.add('was-validated')
+                }, false)
+            })
+        })()
+    </script>
 </body>
 
 </html>