summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorCesar Monroy <[email protected]>2023-05-09 21:15:47 -0600
committerCesar Monroy <[email protected]>2023-05-09 21:15:47 -0600
commit44050a800568de91fda4e11b0dc287a3dcba5a31 (patch)
treefeccd50e770781a69d01c3af563973747fd72284 /js
Login with length validation
Diffstat (limited to '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";
+ }
+}