add username and password validation

Relates #10
fac-13 · Apr 11, 2018 · 0ce6641 · 0ce6641
1 parent 8ef2f87
commit 0ce6641
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/Public/signup.html b/Public/signup.html
@@ -10,14 +10,14 @@
 
 <body>
     <section class="section__form">
-        <form action="/signup" method="POST">
+        <form id="signup-form" action="/signup" method="POST">
             <label for="username">Username</label>
             <input id="username" type="text" required>
             <label for="password">Password</label>
             <input id="password" type="password" required>
             <label for="confirm-password">Confirm Password</label>
             <input id="confirm-password" type="password" required>
-            <button type="submit">Submit</button>
+            <button id="submit" type="submit">Submit</button>
         </form>
     </section>
     <script src="./signup.js"></script>

diff --git a/Public/signup.js b/Public/signup.js
@@ -1,12 +1,24 @@
 const username = document.getElementById("username");
 const password = document.getElementById("password");
 const confirmPass = document.getElementById("confirm-password");
+const submit = document.getElementById("submit");
+const form = document.getElementById("signup-form");
+submit.disabled = true;
 
-confirmPass.addEventListener('keyup',function(){
-    if (this.value !== password.value){
+form.addEventListener('keyup',function(){
+    if (confirmPass.value !== password.value || validatePass(password.value) || username.value.length === 0){
+        submit.disabled = true;
         console.log("can't submit yet");
     } else {
         console.log("matched");
+        submit.disabled = false;
     }
 
-});
+});
+
+function validatePass(value) {
+    const pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&(-/:-?_{}~])(?=.*[A-Z]).{9,}";
+    const regex = new RegExp(pattern);
+    console.log(regex.test(value));
+    return regex.test(value);
+}