Skip to content

Instantly share code, notes, and snippets.

@Blazing-Mike

Blazing-Mike/index.html

Created August 23, 2021 23:52
Show Gist options
  • Save Blazing-Mike/ccc998c66aa00127708a39b5cb34bd8b to your computer and use it in GitHub Desktop.
Save Blazing-Mike/ccc998c66aa00127708a39b5cb34bd8b to your computer and use it in GitHub Desktop.
Download ZIP
code for form validation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Intro component with sign up form</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1 class="heading">
Learn to code by watching others
</h1>
<p class="para">
See how experienced developers solve problems in real-time. Watching scripted tutorials is great,
but understanding how developers think is invaluable. </p>
</div>
<div class="form__container">
<div class="info">
<p class="info__text"><strong> Try it free 7 days</strong> then $20/mo. thereafter</p>
</div>
<form name = "myForm" class="form" id= "form">
<div class="field-container">
<input type="text" class="field" placeholder=" First Name" id="Fname" name="Fname">
<input type="image" src="/images/icon-error.svg" alt="icon-error" class="error-icon">
<div class="success-container">
<p> <i class="arrow success-icon"></i></p>
</div>
<p id="error" class="error-message">Looks like this is not an email</p>
</div>
<div class="field-container">
<input type="text" class="field" placeholder="Last Name" id="Lname" name="Lname">
<input type="image" src="/images/icon-error.svg" alt="icon-error" class="error-icon">
<p id="error" class="error-message">Looks like this is not an email</p>
<div class="success-container">
<p> <i class="arrow success-icon"></i></p>
</div>
</div>
<div class="field-container">
<input type="email" class="field" placeholder=" Email Address" id="email" name="email">
<input type="image" src="/images/icon-error.svg" alt="icon-error" class="error-icon">
<div class="success-container">
<p> <i class="arrow success-icon"></i></p>
</div>
<p id="error" class="error-message"> Looks like this is not an email</p>
</div>
<div class="field-container">
<input type="password" class="field" placeholder="Password" id="password" >
<input type="image" src="/images/icon-error.svg" alt="icon-error" class="error-icon">
<div class="success-container">
<p> <i class="arrow success-icon"></i></p>
</div>
<p id="error" class="error-message">Looks like this is not a password</p>
</div>
<input type="submit" class="submit" id="submit-btn" value="Claim your free trial" >
<p class="terms">
By clicking the button, you are agreeing to our <span class="red-text">Terms and Services</span></p>
</form>
</div>
</div>
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Michael Adebambo</a>.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
const form = document.getElementById("form");
const FirstName = document.getElementById("Fname");
const Lastname = document.getElementById("Lname");
const password = document.getElementById("password");
const email = document.getElementById("email");
const submit = document.getElementById("submit-btn");
const error = document.getElementById('error-message');
const formControl = document.getElementsByClassName('field-container');
// Email validation function
function isEmailValid(email) {
const emailRegexp = new RegExp(
/^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i
)
return emailRegexp.test(email);
}
// Password vailidation
function isPasswordValid(password) {
const passwordRegexp = new RegExp(/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/);
return passwordRegexp.test(password);
}
let Testname = "name"
form.addEventListener('submit', (e) => {
e.preventDefault();
for(var i = 0; i < formControl.length; i++){
if(FirstName.value === ""){
// If there is an error, we add error class to parent element
formControl[0].classList.add('error');
} else {
// If the email is valid we display nothing or we remove the error message
formControl[0].classList.add('success');
}
if(Lastname.value === ""){
// If there is an error, we add error class to parent element
formControl[1].classList.add('error');
} else {
// If the email is valid we display nothing or we remove the error message
formControl[1].classList.add('success');
}
if (!isEmailValid(email.value)) {
// If there is an error, we add error class to parent element
formControl[2].classList.add('error');
} else {
// If the email is valid we display nothing or we remove the error message
formControl[2].classList.add('success');
}
if (!isPasswordValid(password.value)) {
// If there is an error, we add error class to parent element
formControl[3].classList.add('error');
} else {
// If the email is valid we display nothing or we remove the error message
formControl[3].classList.add('success');
}
}
});
/*
form.addEventListener("submit", (e) => {
e.preventDefault();
checkInputs();
})
function checkInputs() {
//get values from input
const firstNameValue = FirstName.value.trim();
const lastNameValue = Lastname.value.trim();
const passwordValue = password.value.trim();
const emailValue = email.value.trim();
if (firstNameValue === ""){
//show error
//add error class
setErrorFor(FirstName, 'FirstName cannot be blank')
} else{
//add success class
setSuccessFor(FirstName)
}
function setErrorFor(input, message) {
const formControl = input.parentElement; // .field-container
const small = formControl.querySelector('.error-message');
// ADD ERROR MESSAGE
small.innetText = message;
// ADD ERROR CLASS
formControl.classname = 'field-container error';
}
}
*/
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
background: url("/images/bg-intro-mobile.png") top no-repeat;
background-color: hsl(0, 100%, 74%);
font-family: "Poppins", sans-serif;
}
/*typo */
.heading {
font-size: 1.5rem;
color: white;
}
.para,
.info__text {
color: white;
font-size: 1.1rem;
}
input::placeholder {
color: hsl(249, 10%, 26%);
font-weight: 500;
font-size: 1.1rem;
font-family: "Poppins", sans-serif;
}
strong {
font-weight: 600;
}
.terms {
color: hsl(246, 25%, 77%);
font-size: 1rem;
width: 18rem;
text-align: center;
}
.red-text {
color: hsl(0, 100%, 74%);
font-weight: 600;
}
/* component */
.submit {
text-transform: uppercase;
color: white;
font-weight: 600;
background: hsl(154, 59%, 51%);
padding: 10px;
border: transparent;
border-radius: 0.3rem;
width: 18rem;
height: 3rem;
text-align: center;
font-family: "Poppins", sans-serif;
}
.submit:hover {
opacity: 0.6;
}
/*body */
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
margin: 2rem 0;
padding: 15px;
}
.intro {
text-align: center;
max-width: 38rem;
}
.info {
background: hsl(248, 32%, 49%);
height: 5rem;
text-align: center;
padding: 15px;
width: 21rem;
border-radius: 0.4rem;
}
/* form */
.form__container {
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
form {
background: white;
padding: 20px;
width: 21rem;
border-radius: 0.4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
}
.field-container {
display: flex;
margin-left: -3rem;
align-items: center;
justify-content: right;
flex-wrap: wrap;
margin: 0 2%;
}
.field-container.success .field {
border-color: hsl(154, 59%, 51%);
}
.field-container.error .field {
border-color: hsl(0, 100%, 74%);
}
.field-container.success .error-icon {
display: none;
}
.field-container.error .field {
border-color: hsl(0, 100%, 74%);
display: flex;
}
.field-container.error .field {
border-color: hsl(0, 100%, 74%);
display: flex;
}
.field-container.error .error-message {
display: flex;
}
.field {
border: 1px solid hsl(246, 25%, 77%);
height: 3.2rem;
display: block;
width: 19rem;
border-radius: 0.3rem;
padding: 10px;
}
.error-message {
color: hsl(0, 100%, 74%);
display: none;
}
.field-container.success .error-icon {
visibility: hidden;
}
.field-container.success .success-container {
visibility: visible;
}
.field-container.error .error-icon {
visibility: visible;
}
.field-container.error .success-container {
visibility: hidden;
}
.success-container {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: hsl(154, 59%, 51%);
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
margin-left: -3rem;
}
i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px 3px;
}
.success-icon {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.error-icon {
width: 2rem;
height: 2rem;
margin-left: -3rem;
visibility: hidden;
}
.field:focus {
outline: none;
}
.attribution {
text-align: center;
color: white;
font-weight: 500;
}
.attribution a {
color: hsl(247, 47%, 85%);
text-decoration: none;
font-weight: 700;
}
@media (min-width: 768px) {
.heading {
font-size: 3rem;
}
.info__text {
font-size: 1.4rem;
}
body {
font-size: 20px;
background: url("/images/bg-intro-desktop.png") top no-repeat;
background-color: hsl(0, 100%, 74%);
}
.intro {
text-align: left;
}
form,
.info {
width: 37rem;
padding: 30px;
}
.field,
.submit {
width: 33rem;
}
.terms {
width: 33rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment