refactor: extracts form submit button

template and js validation

app/templates/forms/submit-btn.html

@@ -0,0 +1,3 @@
+{% macro form_submit_button(text) %}
+  <button class="btn btn-outline-primary submit-button" type="submit">{{text}}</button>
+{% endmacro %}

app/templates/users/register.html

@@ -1,5 +1,6 @@
 {% extends "layout/layout.html" %}
 {% from "forms/validation-block.html" import form_field_validation %}
+{% from "forms/submit-btn.html" import form_submit_button %}
 {% from "layout/inner_header.html" import inner_header%} 
 {% block title %} register {% endblock %}
 {% block head %} 
@@ -90,36 +91,20 @@
         {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
       </div>
       <div class="col-12 text-center">
-        <button class="btn btn-outline-primary register__form-button" type="submit">Register</button>
+        {{ form_submit_button("Register") }}
       </div>
     </form>
   </div>
 </div>
+<script src="{{ url_for('static', filename='js/validate-form.js') }}"></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)
-  })
-
-  const password = document.getElementById("password")
-  const password_validation = document.getElementById("password-confirmation")
+  const password = document.getElementById("password");
+  const password_validation = document.getElementById("password-confirmation");
   password.addEventListener('change', (c) => {
-    password_validation.setAttribute("pattern", c.target.value)
-  })
- 
+    password_validation.setAttribute("pattern", c.target.value);
+  });
 })()
 </script>
 {% endblock %}