From 7e7a6e3a112cb078777bba70a0f1681acca75a87 Mon Sep 17 00:00:00 2001 From: Cesar Monroy Date: Wed, 10 May 2023 23:08:25 -0600 Subject: Validation of username and password with javascript --- js/login.js | 73 ++++++++++++++++++++++++++++--------------------------------- 1 file 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"; } } -- cgit v1.2.3