smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 22:30:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added javascript error validation

Browse source
This commit is contained in:
Mike 2023-11-07 10:33:06 -05:00
parent 81be0a6509
commit bcf0be5888
3 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
signup_form/css/style.css
View file

@ -2,6 +2,7 @@
--main-bg: #C4DFDF; --main-bg: #C4DFDF;
--light-bg: #F8F6F4; --light-bg: #F8F6F4;
--text-color: rgb(22, 72, 99); --text-color: rgb(22, 72, 99);
--error-color: #EF6262;
} }
@ -74,6 +75,14 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
.error {
color: var(--error-color);
font-size: 0.85rem;
margin-left: 5px;
}
@media only screen and (min-width: 700px) { @media only screen and (min-width: 700px) {
.container { .container {
flex-direction: row; flex-direction: row;
@ -147,3 +156,7 @@ body {
font-size: 16px; font-size: 16px;
color: var(--text-color); color: var(--text-color);
} }
button {
cursor: pointer;
}

6
signup_form/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Join Our Awesome Mailing list!</title> <title>Sign up! | Smig.Tech™</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="form"> <div class="form">
<h1 class="call-to-action">Join our mailing list!</h1> <h1 class="call-to-action">Sign up today!</h1>
<form action="" method="#"> <form action="" method="#">
<div class="form-input"> <div class="form-input">
<label for="name">NAME</label> <label for="name">NAME</label>
@ -33,11 +33,13 @@
<div class="form-input"> <div class="form-input">
<label for="password">PASSWORD</label> <label for="password">PASSWORD</label>
<input type="password" name="password" id="password" required minlength="8"> <input type="password" name="password" id="password" required minlength="8">
<div class="error"></div>
</div> </div>
<div class="form-input"> <div class="form-input">
<label for="password-confirmation">CONFIRM PASSWORD</label> <label for="password-confirmation">CONFIRM PASSWORD</label>
<input type="password" name="password-confirmation" id="password-confirmation" required <input type="password" name="password-confirmation" id="password-confirmation" required
minlength="8"> minlength="8">
<div class="error"></div>
</div> </div>
<div class="form-button"> <div class="form-button">
<button type="submit">Sign Up</button> <button type="submit">Sign Up</button>

29
signup_form/js/script.js
View file

@ -1,14 +1,31 @@
const name = document.querySelector('#name'), const name = document.querySelector('#name'),
email = document.querySelector('#email'), email = document.querySelector('#email'),
password = document.querySelector('#password'), 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;
if (password.value.length < 8) {
passwordConfirmation.addEventListener('keyup', e => { password.style.borderColor = "#EF6262";
if (password.value === e.target.value ) { errorDiv.textContent = error;
console.log('they equal');
} else { } 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 = "";
}
});