Login with length validation

1 files changed, 48 insertions, 0 deletions

diff --git a/js/login.js b/js/login.js
new file mode 100644
index 0000000..f151f9a
--- /dev/null
+++ b/js/login.js
@@ -0,0 +1,48 @@
+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);
+
+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";
+    }
+    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";
+    }
+}
+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";
+    }
+    if(password_length > 12){
+	password_icon_check.style.display = "none";
+	password_icon_cancel.style.display = "block";
+	password_input_error.style.display = "block";
+    }
+}