From bcf0be5888c964a0958f2586c961af97d78960d7 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:33:06 -0500 Subject: [PATCH] feat: added javascript error validation --- signup_form/css/style.css | 13 +++++++++++++ signup_form/index.html | 6 ++++-- signup_form/js/script.js | 29 +++++++++++++++++++++++------ 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/signup_form/css/style.css b/signup_form/css/style.css index 5b19b22..92dbf97 100644 --- a/signup_form/css/style.css +++ b/signup_form/css/style.css @@ -2,6 +2,7 @@ --main-bg: #C4DFDF; --light-bg: #F8F6F4; --text-color: rgb(22, 72, 99); + --error-color: #EF6262; } @@ -74,6 +75,14 @@ margin-bottom: 5px; } + +.error { + color: var(--error-color); + font-size: 0.85rem; + margin-left: 5px; +} + + @media only screen and (min-width: 700px) { .container { flex-direction: row; @@ -147,3 +156,7 @@ body { font-size: 16px; color: var(--text-color); } + +button { + cursor: pointer; +} \ No newline at end of file diff --git a/signup_form/index.html b/signup_form/index.html index 4eec80b..ea0301a 100644 --- a/signup_form/index.html +++ b/signup_form/index.html @@ -2,7 +2,7 @@ - Join Our Awesome Mailing list! + Sign up! | Smig.Tech™ @@ -20,7 +20,7 @@
-

Join our mailing list!

+

Sign up today!

@@ -33,11 +33,13 @@
+
+
diff --git a/signup_form/js/script.js b/signup_form/js/script.js index f82fe09..62b893d 100644 --- a/signup_form/js/script.js +++ b/signup_form/js/script.js @@ -1,14 +1,31 @@ const name = document.querySelector('#name'), email = document.querySelector('#email'), password = document.querySelector('#password'), - passwordConfirmation = document.querySelector('#password-confirmation') + passwordConfirmation = document.querySelector('#password-confirmation'), + formInputs = document.querySelectorAll('.form-input') +password.addEventListener('keyup', e => { + let error = '*Password must be at least 8 characters!'; + let errorDiv = password.nextElementSibling; - -passwordConfirmation.addEventListener('keyup', e => { - if (password.value === e.target.value ) { - console.log('they equal'); + if (password.value.length < 8) { + password.style.borderColor = "#EF6262"; + errorDiv.textContent = error; } else { - console.log('They don\'t equal'); + password.style.borderColor = ""; + errorDiv.textContent = ""; } }) + +passwordConfirmation.addEventListener('keyup', e => { + let error = '*Passwords do not match!'; + let errorDiv = passwordConfirmation.nextElementSibling; + + if (password.value !== e.target.value ) { + passwordConfirmation.style.borderColor = "#EF6262"; + errorDiv.textContent = error; + } else { + passwordConfirmation.style.borderColor = ""; + errorDiv.textContent = ""; + } +});