refactor: extracts form submit button

template and js validation

app/static/css/styles.css

@@ -27,4 +27,11 @@ body {
   @media(min-width: 576px) {
     margin-bottom: .5rem;  
   }
+}
+
+.submit-button {
+  width: 100%;
+  @media(min-width: 576px) {
+    width: 200px;
+  }
 }

app/static/js/validate-form.js

@@ -0,0 +1,18 @@
+(() => {
+  '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)
+  }) 
+})()