A Pen by Florin Pop on CodePen.
Created
July 22, 2021 12:12
-
-
Save uchoamaster/8fd89404e8fa020dcfa685045d81d79e to your computer and use it in GitHub Desktop.
Form Validation - #073 of #100Days100Projects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="header"> | |
<h2>Create Account</h2> | |
</div> | |
<form id="form" class="form"> | |
<div class="form-control"> | |
<label for="username">Username</label> | |
<input type="text" placeholder="florinpop17" id="username" /> | |
<i class="fas fa-check-circle"></i> | |
<i class="fas fa-exclamation-circle"></i> | |
<small>Error message</small> | |
</div> | |
<div class="form-control"> | |
<label for="username">Email</label> | |
<input type="email" placeholder="a@florin-pop.com" id="email" /> | |
<i class="fas fa-check-circle"></i> | |
<i class="fas fa-exclamation-circle"></i> | |
<small>Error message</small> | |
</div> | |
<div class="form-control"> | |
<label for="username">Password</label> | |
<input type="password" placeholder="Password" id="password"/> | |
<i class="fas fa-check-circle"></i> | |
<i class="fas fa-exclamation-circle"></i> | |
<small>Error message</small> | |
</div> | |
<div class="form-control"> | |
<label for="username">Password check</label> | |
<input type="password" placeholder="Password two" id="password2"/> | |
<i class="fas fa-check-circle"></i> | |
<i class="fas fa-exclamation-circle"></i> | |
<small>Error message</small> | |
</div> | |
<button>Submit</button> | |
</form> | |
</div> | |
<!-- SOCIAL PANEL HTML --> | |
<div class="social-panel-container"> | |
<div class="social-panel"> | |
<p>Created with <i class="fa fa-heart"></i> by | |
<a target="_blank" href="https://florin-pop.com">Florin Pop</a></p> | |
<button class="close-btn"><i class="fas fa-times"></i></button> | |
<h4>Get in touch on</h4> | |
<ul> | |
<li> | |
<a href="https://www.patreon.com/florinpop17" target="_blank"> | |
<i class="fab fa-discord"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://twitter.com/florinpop1705" target="_blank"> | |
<i class="fab fa-twitter"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://linkedin.com/in/florinpop17" target="_blank"> | |
<i class="fab fa-linkedin"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://facebook.com/florinpop17" target="_blank"> | |
<i class="fab fa-facebook"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://instagram.com/florinpop17" target="_blank"> | |
<i class="fab fa-instagram"></i> | |
</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<button class="floating-btn"> | |
Get in Touch | |
</button> | |
<div class="floating-text"> | |
Part of <a href="https://florin-pop.com/blog/2019/09/100-days-100-projects" target="_blank">#100Days100Projects</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const form = document.getElementById('form'); | |
const username = document.getElementById('username'); | |
const email = document.getElementById('email'); | |
const password = document.getElementById('password'); | |
const password2 = document.getElementById('password2'); | |
form.addEventListener('submit', e => { | |
e.preventDefault(); | |
checkInputs(); | |
}); | |
function checkInputs() { | |
// trim to remove the whitespaces | |
const usernameValue = username.value.trim(); | |
const emailValue = email.value.trim(); | |
const passwordValue = password.value.trim(); | |
const password2Value = password2.value.trim(); | |
if(usernameValue === '') { | |
setErrorFor(username, 'Username cannot be blank'); | |
} else { | |
setSuccessFor(username); | |
} | |
if(emailValue === '') { | |
setErrorFor(email, 'Email cannot be blank'); | |
} else if (!isEmail(emailValue)) { | |
setErrorFor(email, 'Not a valid email'); | |
} else { | |
setSuccessFor(email); | |
} | |
if(passwordValue === '') { | |
setErrorFor(password, 'Password cannot be blank'); | |
} else { | |
setSuccessFor(password); | |
} | |
if(password2Value === '') { | |
setErrorFor(password2, 'Password2 cannot be blank'); | |
} else if(passwordValue !== password2Value) { | |
setErrorFor(password2, 'Passwords does not match'); | |
} else{ | |
setSuccessFor(password2); | |
} | |
} | |
function setErrorFor(input, message) { | |
const formControl = input.parentElement; | |
const small = formControl.querySelector('small'); | |
formControl.className = 'form-control error'; | |
small.innerText = message; | |
} | |
function setSuccessFor(input) { | |
const formControl = input.parentElement; | |
formControl.className = 'form-control success'; | |
} | |
function isEmail(email) { | |
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); | |
} | |
// SOCIAL PANEL JS | |
const floating_btn = document.querySelector('.floating-btn'); | |
const close_btn = document.querySelector('.close-btn'); | |
const social_panel_container = document.querySelector('.social-panel-container'); | |
floating_btn.addEventListener('click', () => { | |
social_panel_container.classList.toggle('visible') | |
}); | |
close_btn.addEventListener('click', () => { | |
social_panel_container.classList.remove('visible') | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); | |
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap'); | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
background-color: #9b59b6; | |
font-family: 'Open Sans', sans-serif; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
min-height: 100vh; | |
margin: 0; | |
} | |
.container { | |
background-color: #fff; | |
border-radius: 5px; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
overflow: hidden; | |
width: 400px; | |
max-width: 100%; | |
} | |
.header { | |
border-bottom: 1px solid #f0f0f0; | |
background-color: #f7f7f7; | |
padding: 20px 40px; | |
} | |
.header h2 { | |
margin: 0; | |
} | |
.form { | |
padding: 30px 40px; | |
} | |
.form-control { | |
margin-bottom: 10px; | |
padding-bottom: 20px; | |
position: relative; | |
} | |
.form-control label { | |
display: inline-block; | |
margin-bottom: 5px; | |
} | |
.form-control input { | |
border: 2px solid #f0f0f0; | |
border-radius: 4px; | |
display: block; | |
font-family: inherit; | |
font-size: 14px; | |
padding: 10px; | |
width: 100%; | |
} | |
.form-control input:focus { | |
outline: 0; | |
border-color: #777; | |
} | |
.form-control.success input { | |
border-color: #2ecc71; | |
} | |
.form-control.error input { | |
border-color: #e74c3c; | |
} | |
.form-control i { | |
visibility: hidden; | |
position: absolute; | |
top: 40px; | |
right: 10px; | |
} | |
.form-control.success i.fa-check-circle { | |
color: #2ecc71; | |
visibility: visible; | |
} | |
.form-control.error i.fa-exclamation-circle { | |
color: #e74c3c; | |
visibility: visible; | |
} | |
.form-control small { | |
color: #e74c3c; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
visibility: hidden; | |
} | |
.form-control.error small { | |
visibility: visible; | |
} | |
.form button { | |
background-color: #8e44ad; | |
border: 2px solid #8e44ad; | |
border-radius: 4px; | |
color: #fff; | |
display: block; | |
font-family: inherit; | |
font-size: 16px; | |
padding: 10px; | |
margin-top: 20px; | |
width: 100%; | |
} | |
/* SOCIAL PANEL CSS */ | |
.social-panel-container { | |
position: fixed; | |
right: 0; | |
bottom: 80px; | |
transform: translateX(100%); | |
transition: transform 0.4s ease-in-out; | |
} | |
.social-panel-container.visible { | |
transform: translateX(-10px); | |
} | |
.social-panel { | |
background-color: #fff; | |
border-radius: 16px; | |
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); | |
border: 5px solid #001F61; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
font-family: 'Muli'; | |
position: relative; | |
height: 169px; | |
width: 370px; | |
max-width: calc(100% - 10px); | |
} | |
.social-panel button.close-btn { | |
border: 0; | |
color: #97A5CE; | |
cursor: pointer; | |
font-size: 20px; | |
position: absolute; | |
top: 5px; | |
right: 5px; | |
} | |
.social-panel button.close-btn:focus { | |
outline: none; | |
} | |
.social-panel p { | |
background-color: #001F61; | |
border-radius: 0 0 10px 10px; | |
color: #fff; | |
font-size: 14px; | |
line-height: 18px; | |
padding: 2px 17px 6px; | |
position: absolute; | |
top: 0; | |
left: 50%; | |
margin: 0; | |
transform: translateX(-50%); | |
text-align: center; | |
width: 235px; | |
} | |
.social-panel p i { | |
margin: 0 5px; | |
} | |
.social-panel p a { | |
color: #FF7500; | |
text-decoration: none; | |
} | |
.social-panel h4 { | |
margin: 20px 0; | |
color: #97A5CE; | |
font-family: 'Muli'; | |
font-size: 14px; | |
line-height: 18px; | |
text-transform: uppercase; | |
} | |
.social-panel ul { | |
display: flex; | |
list-style-type: none; | |
padding: 0; | |
margin: 0; | |
} | |
.social-panel ul li { | |
margin: 0 10px; | |
} | |
.social-panel ul li a { | |
border: 1px solid #DCE1F2; | |
border-radius: 50%; | |
color: #001F61; | |
font-size: 20px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 50px; | |
width: 50px; | |
text-decoration: none; | |
} | |
.social-panel ul li a:hover { | |
border-color: #FF6A00; | |
box-shadow: 0 9px 12px -9px #FF6A00; | |
} | |
.floating-btn { | |
border-radius: 26.5px; | |
background-color: #001F61; | |
border: 1px solid #001F61; | |
box-shadow: 0 16px 22px -17px #03153B; | |
color: #fff; | |
cursor: pointer; | |
font-size: 16px; | |
line-height: 20px; | |
padding: 12px 20px; | |
position: fixed; | |
bottom: 20px; | |
right: 20px; | |
z-index: 999; | |
} | |
.floating-btn:hover { | |
background-color: #ffffff; | |
color: #001F61; | |
} | |
.floating-btn:focus { | |
outline: none; | |
} | |
.floating-text { | |
background-color: #001F61; | |
border-radius: 10px 10px 0 0; | |
color: #fff; | |
font-family: 'Muli'; | |
padding: 7px 15px; | |
position: fixed; | |
bottom: 0; | |
left: 50%; | |
transform: translateX(-50%); | |
text-align: center; | |
z-index: 998; | |
} | |
.floating-text a { | |
color: #FF7500; | |
text-decoration: none; | |
} | |
@media screen and (max-width: 480px) { | |
.social-panel-container.visible { | |
transform: translateX(0px); | |
} | |
.floating-btn { | |
right: 10px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment