Validation of username and password with javascript

1 files changed, 33 insertions, 40 deletions

diff --git a/js/login.js b/js/login.js
index f151f9a..681243c 100644
--- a/js/login.js
+++ b/js/login.js
@@ -1,48 +1,41 @@
-const username = document.getElementById("username");
-const username_icon_cancel = document.getElementById("icon-cancel__username");
-const username_icon_check = document.getElementById("icon-check__username");
-const username_input_error = document.getElementById("input-error__username");
-const password = document.getElementById("password");
-const password_icon_cancel = document.getElementById("icon-cancel__password");
-const password_icon_check = document.getElementById("icon-check__password");
-const password_input_error = document.getElementById("input-error__password");
+const USERNAME = document.getElementById("username");
+const USERNAME_ICON_CANCEL = document.getElementById("icon-cancel__username");
+const USERNAME_ICON_CHECK = document.getElementById("icon-check__username");
+const USERNAME_INPUT_ERROR = document.getElementById("input-error__username");
+const PASSWORD = document.getElementById("password");
+const PASSWORD_ICON_CANCEL = document.getElementById("icon-cancel__password");
+const PASSWORD_ICON_CHECK = document.getElementById("icon-check__password");
+const PASSWORD_INPUT_ERROR = document.getElementById("input-error__password");
 
-username.addEventListener('input', validate_username_length);
-password.addEventListener('input', validate_password_length);
+username.addEventListener('input', validate_username);
+password.addEventListener('input', validate_password);
 
-function validate_username_length(e) {
-    var username_length = e.target.value.length;
-    if(username_length < 4){
-	username_icon_check.style.display = "none";
-	username_icon_cancel.style.display = "block";
-	username_input_error.style.display = "block";
+function validate_username(e){
+    const USERNAME = e.target.value;
+    var valid_username = /^[a-zA-Z0-9\_\-]{4,16}$/.test(USERNAME);
+    if(valid_username){
+	USERNAME_ICON_CHECK.style.display = "block";
+	USERNAME_ICON_CANCEL.style.display = "none";
+	USERNAME_INPUT_ERROR.style.display = "none";
     }
-    if(username_length >=4 && username_length <= 16){
-	username_icon_check.style.display = "block";
-	username_icon_cancel.style.display = "none";
-	username_input_error.style.display = "none";
-    }
-    if(username_length > 16){
-	username_icon_check.style.display = "none";
-	username_icon_cancel.style.display = "block";
-	username_input_error.style.display = "block";
+    if(!valid_username){
+	USERNAME_ICON_CHECK.style.display = "none";
+	USERNAME_ICON_CANCEL.style.display = "block";
+	USERNAME_INPUT_ERROR.style.display = "block";
     }
 }
-function validate_password_length(e) {
-    var password_length = e.target.value.length;
-    if(password_length < 4){
-	password_icon_check.style.display = "none";
-	password_icon_cancel.style.display = "block";
-	password_input_error.style.display = "block";
-    }
-    if(password_length >=4 && password_length <= 12){
-	password_icon_check.style.display = "block";
-	password_icon_cancel.style.display = "none";
-	password_input_error.style.display = "none";
+
+function validate_password(e){
+    const PASSWORD = e.target.value;
+    var valid_password = /^.{4,12}$/.test(PASSWORD);
+    if(valid_password){
+	PASSWORD_ICON_CHECK.style.display = "block";
+	PASSWORD_ICON_CANCEL.style.display = "none";
+	PASSWORD_INPUT_ERROR.style.display = "none";
     }
-    if(password_length > 12){
-	password_icon_check.style.display = "none";
-	password_icon_cancel.style.display = "block";
-	password_input_error.style.display = "block";
+    if(!valid_password){
+	PASSWORD_ICON_CHECK.style.display = "none";
+	PASSWORD_ICON_CANCEL.style.display = "block";
+	PASSWORD_INPUT_ERROR.style.display = "block";
     }
 }