From 44050a800568de91fda4e11b0dc287a3dcba5a31 Mon Sep 17 00:00:00 2001 From: Cesar Monroy Date: Tue, 9 May 2023 21:15:47 -0600 Subject: Login with length validation --- js/login.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 js/login.js (limited to 'js') 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"; + } +} -- cgit v1.2.3