Skip to content

Commit

Permalink
adding error messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnthonyDeSantiago
AnthonyDeSantiago committed Sep 23, 2023
1 parent c037cd2 commit dfd7e58
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 23 deletions.
45 changes: 39 additions & 6 deletions public/new_user_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,45 @@

<!-- Form page -->
<form id ="login_form">
<input type="email" name="user_email" id="user_email" class="new_user_form_field" placeholder="Email">
<input type="first" name="first_name" id="first_name" class="new_user_form_field" placeholder="First Name">
<input type="last" name="last_name" id="last_name" class="new_user_form_field" placeholder="Last Name">
<input type="address" name="address" id="address" class="new_user_form_field" placeholder="Address">
<input type="dob" name="dateofbirth" id="dateofbirth" class="new_user_form_field" placeholder="MM/DD/YY">
<input type="password" name="password" id="password" class="new_user_form_field" placeholder="Password">
<div class="form-control">
<label for="email">Email</label>
<input type="text" name="user_email" id="user_email" class="new_user_form_field" placeholder="Enter Email">
<small>Error Message</small>
</div>

<div class="form-control">
<label for="first">First Name</label>
<input type="text" name="first_name" id="first_name" class="new_user_form_field" placeholder="Enter First Name">
<small>Error Message</small>
</div>

<div class="form-control">
<label for="last">Last Name</label>
<input type="text" name="last_name" id="last_name" class="new_user_form_field" placeholder="Enter Last Name">
<small>Error Message</small>
</div>


<div class="form-control">
<label for="address">Address</label>
<input type="text" name="address" id="address" class="new_user_form_field" placeholder="Enter Address">
<small>Error Message</small>
</div>

<div class="form-control">
<label for="dateofbirth">Date of Birth</label>
<input type="text" name="dateofbirth" id="dateofbirth" class="new_user_form_field" placeholder="MM/DD/YYYY">
<small>Error Message</small>
</div>

<div class="form-control">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="new_user_form_field" placeholder="Enter Password">
<small>Error Message</small>
</div>




<h2 id = "avatar_form">
<input type="radio" name="avatar" id="avatar_radio" value="av1">
Expand Down
73 changes: 57 additions & 16 deletions public/sprout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,19 @@ inputFile.onchange = function(){
profilePicture.src = URL.createObjectURL(inputFile.files[0]);
}

/*
Testing
*/


//******** */
console.log("sprout.js loaded!!")
/*Passwords must be:
--> a minimum of 8 characters,
--> must start with a letter,
--> must have a letter,
--> a number and special character
*/

function validatePassword(password) {

var passwordPattern = /^(?=[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()-+=<>?]).{8,}$/;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
})

Expand Down
47 changes: 46 additions & 1 deletion public/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--error-color: #e74c3c;

}
/* full page */
html{
height: 100%;
Expand Down Expand Up @@ -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;
Expand All @@ -73,6 +117,7 @@ body{
outline: 0;
}


/* color of the text box when not in use*/
.login_form_field::placeholder{
background-color: gainsboro;
Expand Down

0 comments on commit dfd7e58

Please sign in to comment.