summaryrefslogtreecommitdiff
path: root/js/login.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/login.js')
-rw-r--r--js/login.js48
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";
+ }
+}