Add user registration validation

app/public/static/js/register.js

@@ -0,0 +1,19 @@
+const form = document.getElementById("login-form");
+form.addEventListener('submit', function (e) {
+  e.preventDefault();
+
+  // validate form
+  const p1 = document.querySelector('input[name="password"]');
+  const p2 = document.querySelector('input[name="checked_password"]'); 
+  
+  if (p1.value == p2.value) {
+    console.log("Passwords match");
+    form.submit();
+  } else {
+    console.log("Passwords do not match");
+    // do something with the forms
+    p1.setAttribute('style', 'border: 1px solid red');
+    p2.setAttribute('style', 'border: 1px solid red');
+  }
+});
+

app/templates/user/register.twig

@@ -1,5 +1,9 @@
 {% extends 'layouts/skeleton.twig' %}
 
+{% block head_js %}
+<script async src="/static/js/register.js"></script>
+{% endblock %}
+
 {% block content %}
 <div>
     <form action="/register" method="post" id="login-form">
@@ -26,19 +30,3 @@
 </div>
 {% endblock %}
 
-{% block bod_js %}
-<script type="javascript">
-const form = document.getElementById("login-form");
-form.addEventListener('submit', function (e) {
-    e.preventDefault();
-
-    // validate form
-    const [p1] = document.querySelector('input[name="password"]');
-    const [p2] = document.querySelector('input[name="checked_password"]'); 
-
-    if (p1.getAttribute("value") == p2.getAttribute("value")) {
-        return this.submit();
-    }
-});
-</script>
-{% endblock %}