From dfd7e5848cf81e3d0bcbe16c462526034362b395 Mon Sep 17 00:00:00 2001 From: AnthonyDeSantiago <94334680+AnthonyDeSantiago@users.noreply.github.com> Date: Sat, 23 Sep 2023 19:29:45 -0400 Subject: [PATCH] adding error messages --- public/new_user_page.html | 45 ++++++++++++++++++++---- public/sprout.js | 73 ++++++++++++++++++++++++++++++--------- public/style.css | 47 ++++++++++++++++++++++++- 3 files changed, 142 insertions(+), 23 deletions(-) diff --git a/public/new_user_page.html b/public/new_user_page.html index 073bf4b..abfa114 100644 --- a/public/new_user_page.html +++ b/public/new_user_page.html @@ -19,12 +19,45 @@
- - - - - - +
+ + + Error Message +
+ +
+ + + Error Message +
+ +
+ + + Error Message +
+ + +
+ + + Error Message +
+ +
+ + + Error Message +
+ +
+ + + Error Message +
+ + +

diff --git a/public/sprout.js b/public/sprout.js index 8e33325..ababc7d 100644 --- a/public/sprout.js +++ b/public/sprout.js @@ -33,6 +33,12 @@ inputFile.onchange = function(){ profilePicture.src = URL.createObjectURL(inputFile.files[0]); } +/* +Testing +*/ + + +//******** */ console.log("sprout.js loaded!!") /*Passwords must be: --> a minimum of 8 characters, @@ -40,7 +46,6 @@ console.log("sprout.js loaded!!") --> must have a letter, --> a number and special character */ - function validatePassword(password) { var passwordPattern = /^(?=[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()-+=<>?]).{8,}$/; @@ -99,47 +104,83 @@ function validateEmail(email) { return emailPattern.test(email); } - +function showError(input, message) { + const formControl = input.parentElement; + formControl.className = "form-control error"; + const small = formControl.querySelector('small'); + small.innerText = message +} document.getElementById("login_form").addEventListener("submit", function (e) { e.preventDefault(); - - var userEmail = document.getElementById("user_email").value; - var firstName = document.getElementById("first_name").value; - var lastName = document.getElementById("last_name").value; - var address = document.getElementById("address").value; - var dateOfBirth = document.getElementById("dateofbirth").value; - var password = document.getElementById("password").value; + const userEmailElement = document.getElementById("user_email"); + const firstNameElement = document.getElementById("first_name"); + const lastNameElement = document.getElementById("last_name"); + const dateOfBirthElement = document.getElementById("dateofbirth"); + const addressElement = document.getElementById("address"); + const passwordElement = document.getElementById("password"); + + var userEmail = userEmailElement.value; + var firstName = firstNameElement.value; + var lastName = lastNameElement.value; + var address = addressElement.value; + var dateOfBirth = dateOfBirthElement.value; + var password = passwordElement.value; var isValid = true; if (!validateEmail(userEmail)) { - alert("Invalid email address"); + var errorMessage = 'Please enter a valid email address' + if (userEmail == '') { + errorMessage = "Please enter an email address." + } + showError(userEmailElement, errorMessage) isValid = false; } if (!validateFirstName(firstName)) { - alert("Invalid first name"); + var errorMessage = 'First name must be only letters and contain no spaces' + if (firstName == '') { + errorMessage = "Please enter a first name." + } + showError(firstNameElement, errorMessage); isValid = false; } if (!validateLastName(lastName)) { - alert("Invalid last name"); + var errorMessage = 'Last name must be only letters' + if (lastName == '') { + errorMessage = "Please enter a last name." + } + showError(lastNameElement, errorMessage); isValid = false; } if (!validateAddress(address)) { - alert("Invalid address"); + var errorMessage = 'Please enter a valid address' + if (address == '') { + errorMessage = 'Please enter an address' + } + showError(addressElement, errorMessage) isValid = false; } if (!validateDate(dateOfBirth)) { - alert("Invalid date of birth"); + var errorMessage = 'Date of birth must be in MM/DD/YYYY format' + if (dateOfBirth == '') { + errorMessage = "Please enter a date of birth." + } + showError(dateOfBirthElement, errorMessage); isValid = false; } if (!validatePassword(password)) { - alert("Invalid password"); + var errorMessage = 'Passwords must be at least 8 characters, start with a letter, and contain a number and a special character' + if (password == '') { + errorMessage = "Please enter a password." + } + + showError(passwordElement, errorMessage); isValid = false; } @@ -166,7 +207,7 @@ document.getElementById("login_form").addEventListener("submit", function (e) { addDoc(newUserRequest, newUser); console.log('Document added or updated successfully!'); } - + console.log("everything validated") return true; }) diff --git a/public/style.css b/public/style.css index f3e99b0..f22115e 100644 --- a/public/style.css +++ b/public/style.css @@ -1,3 +1,7 @@ +:root { + --error-color: #e74c3c; + +} /* full page */ html{ height: 100%; @@ -55,10 +59,50 @@ body{ justify-items: center; align-items: center; width:100%; - margin-top: 10%; + margin-top: 1%; } +.form-control { + margin-bottom: 1%; + padding-bottom: 1%; + position: relative; +} + +.form-control label { + color: #444444; + display: block; + margin-bottom: 1%; + font-size: x-large; +} + +.form-control input { + border: 2px solid #6d6d6d; + border-radius: 4px; + display: block; + margin-bottom: 1%; + width: 100%; + padding: 2% +} + +.form-control input:focus { + outline: 0; + border-color: #161616; +} + +.form-control.error input { + border-color: var(--error-color); +} + +.form-control small { + color: var(--error-color); + visibility: hidden; +} + +.form-control.error small { + visibility: visible; +} + /* controls the textbox */ .login_form_field{ background-color: gainsboro; @@ -73,6 +117,7 @@ body{ outline: 0; } + /* color of the text box when not in use*/ .login_form_field::placeholder{ background-color: gainsboro;