feat(views/user): Register has better validation and error messages

1 files changed, 30 insertions, 2 deletions

diff --git a/views/user/create/index.php b/views/user/create/index.php
index 4bec861..223ab9b 100644
--- a/views/user/create/index.php
+++ b/views/user/create/index.php
@@ -15,7 +15,35 @@
         <?php endif; ?>
     <?php endif; ?>
 
-    <input type="text" name="username" placeholder="Username" minlength="1" pattern="[A-Za-z][A-Za-z_0-9]*">
-    <input type="password" name="password" placeholder="Password" minlength="4">
+    <input id="name" type="text" name="username" placeholder="Username" minlength="1" pattern="[A-Za-z][A-Za-z_0-9]*" required>
+    <input id="pass1" type="password" name="password" placeholder="Password" minlength="4" required>
+    <input id="pass2" type="password" name="password" placeholder="Confirm password" minlength="4" required>
     <input type="submit" value="Register">
 </form>
+
+<script type="text/javascript">
+const name = document.getElementById('name');
+name.onkeyup = function () {
+    if (!name.reportValidity()) {
+        name.setCustomValidity('Username must start with a character and must be composed of characters, digits and underscores!');
+    }
+    else {
+        name.setCustomValidity('');
+    }
+}
+
+const pass1 = document.getElementById('pass1');
+const pass2 = document.getElementById('pass2');
+
+function validatePasswords() {
+    if (pass1.value !== pass2.value) {
+        pass2.setCustomValidity('Passwords do not match!');
+    }
+    else {
+        pass2.setCustomValidity('');
+    }
+}
+
+pass1.onchange = validatePasswords;
+pass2.onkeyup = validatePasswords;
+</script>