I have the following code:
const form = document.forms.myform;
form.onsubmit = e => {
e.preventDefault()
let data = Object.fromEntries(new FormData(form).entries())
// for test
console.clear()
console.log('data', JSON.stringify(data))
let validationOK = true
for (let entrie in data) {
if (!form[entrie].checkValidity()) {
validationOK = false
form[entrie].classList.add('shakingErr')
setTimeout(() => {
form[entrie].classList.remove('shakingErr')
}, 820)
}
}
if (validationOK) {
fetch(form.action, {
method: form.method,
body: data,
headers: {
Accept: 'application/json'
}
})
.finally(() => {
window.location = "thankyou.html"
})
}
}
//Contact Form Error Animation
document.querySelector('form').addEventListener('submit', function(e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function(f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function() {
f.style.animation = "unset";
}, 820);
} else {
f.style.borderColor = "initial";
}
})
if (!isValid) {
e.preventDefault();
}
})
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xrgjbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
This code is not sending the responses to my email and I'm not sure where the error is in the JS logic. Basically, it should send the contact responses to the email or basically execute the action I have in the HTML. I use Formspree for sending contact responses to my email but I do not know where the error is in the JS file. Any suggestions on how to accomplish this task?
Basically I did some changes to my JS code and before it worked fine where it sent responses to the email but now I do not know what happened. This was the previous JS file which sent the responses to the email:
var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).finally(() => {
window.location = "thankyou.html";
});
}
myform.firstname.oninvalid = badEntrie
myform.lastname.oninvalid = badEntrie
myform.email.oninvalid = badEntrie
myform.subject.oninvalid = badEntrie
function badEntrie({ target }) {
target.classList.add('shakingErr')
setTimeout(() => { target.classList.remove('shakingErr') }, 820)
}
form.addEventListener("submit", handleSubmit)
You need to JSON.stringify() the data in the fetch request.
const form = document.forms.myform;
form.onsubmit = e => {
e.preventDefault()
let data = Object.fromEntries(new FormData(form).entries())
console.log(data)
let validationOK = true
for (let entrie in data) {
if (!form[entrie].checkValidity()) {
validationOK = false
form[entrie].classList.add('shakingErr')
setTimeout(() => {
form[entrie].classList.remove('shakingErr')
}, 820)
}
}
if (validationOK) {
fetch(form.action, {
method: form.method,
body: JSON.stringify(data),
headers: {
Accept: 'application/json'
}
})
.finally(() => {
window.location = "thankyou.html"
})
}
}
//Contact Form Error Animation
document.querySelector('form').addEventListener('submit', function(e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function(f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function() {
f.style.animation = "unset";
}, 820);
} else {
f.style.borderColor = "initial";
}
})
if (!isValid) {
e.preventDefault();
}
})
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xrgjbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
Related
This is a register form I'm currently working on it. The problem is that the JavaScript only validates the first field in the form which is the "username" field only, but not the rest of it. If i change the code by moving the password field to above, then the code validates for the passwords only. and same goes for the email address field. May I know, how to solve this issue?. Your help is much appreciated. I'm having this error only in Eclipse IDE application. BUT, WHEN THIS CODE IS DONE IN FIDDLE, IT WORKS FINE. THE CODE IN THE FIDDLE IS IN THIS LINK: https://jsfiddle.net/dbvnkcfm/5/.
Please help solve this issue, because I'm new to JavaScript.
Below is the code in my Eclipse IDE.
#charset "ISO-8859-1";
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #ECB365;
}
body,
input {
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #041C32;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.login-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.log-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: #ECB365;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #ECB365;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #444444;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #041C32;
}
.input-field input::placeholder {
color: #444444;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #ECDBBA;
border-radius: 50%;
border: 1px solid #fff;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
}
.social-icon:hover {
color: #ECB365;
border-color: #ECB365;
}
.btn {
width: 150px;
background-color: #064663;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #4d84e2;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #064663 0%, #064663 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: #041C32;
/*border: 2px solid #fff;*/
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.btn.transparent:hover {
background-color: #4d84e2;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .login-signup {
left: 25%;
}
.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode form.log-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
#media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh;
}
.login-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.login-signup,
.container.sign-up-mode .login-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .login-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
#media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Style.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="get">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<i class="fab fa-facebook-f"> </i>
<i class="fab fa-twitter"> </i>
<i class="fab fa-google"> </i>
<i class="fab fa-linkedin-in"></i>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" onSubmit="return Register()">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" class="btn" value="Sign up" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register()
{
return validation();
}
function validation()
{
var user = document.getElementById('user').value;
var emailAddress = document.getElementById('emailAddress').value;
var pass = document.getElementById('pass').value;
console.log(user)
if (user == null || user == "")
{
alert ("Username cannot be empty");
return false;
}
else if(user.length < 3 || user.length > 30)
{
alert ("Username must be at least 3 characters long.");
return false;
}
else
{
return true;
}
console.log(emailAddress)
if (emailAddress == null || emailAddress == "")
{
alert ("Email cannot be empty");
return false;
}
else if(emailAddress.indexOf('#') <= 0)
{
alert (" # symbol is on invalid position");
return false;
}
else
{
document.getElementById('emailAddress').innerHTMl = "";
}
console.log(pass)
if (pass == null || pass == "")
{
alert ("Password cannot be empty");
return false;
}
else if(pass.length <= 4 || pass.length >= 20)
{
alert ("Password must be at least 4 characters long.");
return false;
}
else
{
document.getElementById('pass').innerHTMl = "";
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>
You have duplicated IDs so I add 's' for each ID in signup form also when you use return It's something like you break the function. This should work for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="post">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id="luser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id="lpass" class="text-danger" />
</div>
<br>
<input type="button" value="Login" class="btn solid" onclick="Register('login')" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<i class="fab fa-facebook-f"> </i>
<i class="fab fa-twitter"> </i>
<i class="fab fa-google"> </i>
<i class="fab fa-linkedin-in"></i>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" o>
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id="suser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id="semailAddress" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id="spass" class="text-danger" />
</div>
<br>
<input type="button" class="btn" value="Sign up" onclick="Register('signup')" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register(formType) {
return validation(formType);
}
function validation(formType) {
if (formType == "login") {
var user = document.getElementById("luser").value;
var pass = document.getElementById("lpass").value;
} else {
var user = document.getElementById("suser").value;
var pass = document.getElementById("spass").value;
var emailAddress = document.getElementById("semailAddress").value;
}
var errors = [];
// var user = document.getElementById('suser').value;
// var emailAddress = document.getElementById('semailAddress').value;
// var pass = document.getElementById('spass').value;
console.log(user)
if (user == null || user == "") {
errors.push("Username is required");
// return false;
} else if (user.length < 3 || user.length > 30) {
errors.push("Username must be at least 3 characters long.");
// return false;
}
if (formType == "signup") {
console.log(emailAddress)
if (emailAddress == null || emailAddress == "") {
errors.push("Email cannot be empty");
//return false;
} else if (emailAddress.indexOf('#') <= 0) {
errors.push(" # symbol is on invalid position");
} else {
document.getElementById('semailAddress').innerHTMl = "";
}
}
console.log(pass)
if (pass == null || pass == "") {
errors.push("Password cannot be empty");
// return false;
} else if (pass.length <= 4 || pass.length >= 20) {
errors.push("Password must be at least 4 characters long.");
// return false;
} else {
document.getElementById('spass').innerHTMl = "";
}
if (errors.length > 0) {
alert(errors.join("\n"));
return false;
} else {
return true;
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>
I have the following code:
input[type=text], [type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index:2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:auto;
margin-top:1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column, input[type=submit] {
width: auto;
margin-top:0;
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST">
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
So what I am basically looking for is the shake effect when the user submits without entering any inputs.
Expected Output
When the user hits the submit button without entering anything, the border of the box should turn red as well as shake. I just want the boxes of the placeholders to shake and turn red, not the whole element. I tried adding keyframes to make this possible but got stuck since I was not getting the desired output, any suggestions?
In other words, I just would like the first name, last name, email, and subject borders of the boxes to turn red and shake.
Add an event listener for submit that loops through all the input and textarea fields and checks whether they are valid with checkValidity(). If they are not valid, we set their border color to red with the borderColor style attribute and set their animation with the animation style attribute.
To be able to play the same animation over and over again, we can use setTimeout to wait a specified number of milliseconds and then set the animation style attribute back to unset.
document.querySelector('form').addEventListener('submit', function(e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function(f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function(){f.style.animation="unset";},820);
}else{
f.style.borderColor = "initial";
//Sets it back to normal if the field is valid
}
})
if (!isValid) {
e.preventDefault();
}
})
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
I am trying to animate the transition of the display of my login and register modals, I know this can't simply be done by doing transition: display 1s. This is why I have been using opacity since this post has an answer where they make use of the opacity. I have been trying to implement it in my own project but it's not doing anything at the moment.
function toggleRegister() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
registerPageTitle = "Register";
if (registerModal.style.display === "none") {
loginModal.classList.remove("modal");
loginModal.classList.add("modal-transition")
loginModal.classList.add("modal-hidden");
loginModal.classList.remove("modal-transition")
login.style.display("none");
registerModal.classList.remove("modal-hidden");
registerModal.classList.add("modal-transition")
registerModal.classList.add("modal");
registerModal.classList.remove("modal-transition")
register.style.display("block")
document.title = registerPageTitle;
} else {
return;
}
}
function toggleLogin() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
loginPageTitle = "Login";
if (loginModal.style.display === "none") {
registerModal.classList.remove("modal");
registerModal.classList.add("modal-transition")
registerModal.classList.add("modal-hidden");
registerModal.classList.remove("modal-transition")
register.style.display("none");
loginModal.classList.remove("modal-hidden");
loginModal.classList.add("modal-transition")
loginModal.classList.add("modal");
loginModal.classList.remove("modal-transition")
login.style.display("block");
document.title = loginPageTitle;
} else {
return;
}
}
.header a.register {
display: block;
transition: color 0.2s;
}
.header a.login {
display: none;
transition: color 0.2s;
}
.modal-void {
display: flex;
position: relative;
justify-content: center;
align-content: center;
align-items: center;
flex: 1;
}
.loginModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 550px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.registerModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 550px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
/*Modal transition*/
.modal {
display: flex;
opacity: 1;
}
.modal-hidden {
display: none;
opacity: 0;
}
.modal-transition {
display: flex;
opacity: 0;
}
.modal-animate {
transition: opacity 1.2s ease;
}
<div class="header">
<a class="register" id="register" onclick="toggleRegister()">Register</a>
<a class="login" id="login" onclick="toggleLogin()">Login</a>
</div>
<div class="modal-void">
<div class="loginModal modal-animate modal" id="loginModal">
<h1>Login</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="loginUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="loginPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="button">
<input type="submit" id="loginSubmit" placeholder=" " value="Login">
</label>
Password forgot?
</form>
</div>
<div class="registerModal modal-animate modal-hidden" id="registerModal">
<h1>Register</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="registerUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="registerPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="userfield">
<input type="password" id="registerPasswordRepeat" placeholder=" ">
<p>Password repeat</p>
</label>
<label class="button">
<input type="submit" id="registerSubmit" placeholder=" " value="Register">
</label>
</form>
</div>
</div>
So what I am trying to do here is add and remove classes to the modals so I can transition them, although nothing happens. I'm thinking it has something to do with my CSS and JavaScript that isn't done correctly, most likely my script I suspect.
If I forgot some code which makes this unclear, let me know and I'll add it.
You could try using animation instead:
function toggleRegister() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
registerPageTitle = "Register";
if (registerModal.style.display === "none") {
loginModal.classList.remove("modal");
loginModal.classList.add("modal-transition")
loginModal.classList.add("modal-hidden");
loginModal.classList.remove("modal-transition")
login.style.display("none");
registerModal.classList.remove("modal-hidden");
registerModal.classList.add("modal-transition")
registerModal.classList.add("modal");
registerModal.classList.remove("modal-transition")
register.style.display("block")
document.title = registerPageTitle;
} else {
return;
}
}
function toggleLogin() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
loginPageTitle = "Login";
if (loginModal.style.display === "none") {
registerModal.classList.remove("modal");
registerModal.classList.add("modal-transition")
registerModal.classList.add("modal-hidden");
registerModal.classList.remove("modal-transition")
register.style.display("none");
loginModal.classList.remove("modal-hidden");
loginModal.classList.add("modal-transition")
loginModal.classList.add("modal");
loginModal.classList.remove("modal-transition")
login.style.display("block");
document.title = loginPageTitle;
} else {
return;
}
}
.header a.register {
display: block;
transition: color 0.2s;
}
.header a.login {
display: none;
transition: color 0.2s;
}
.modal-void {
display: flex;
position: relative;
justify-content: center;
align-content: center;
align-items: center;
flex: 1;
}
.loginModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 550px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.registerModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 550px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
/*Modal transition*/
.modal {
display: flex;
opacity: 1;
}
.modal-hidden {
display: none;
opacity: 0;
}
.modal-transition {
display: flex;
opacity: 0;
}
.modal-animate {
animation: example 1.2s;
}
#keyframes example {
0% {opacity:0}
100% {opacity:1}
}
<div class="header">
<a class="register" id="register" onclick="toggleRegister()">Register</a>
<a class="login" id="login" onclick="toggleLogin()">Login</a>
</div>
<div class="modal-void">
<div class="loginModal modal-animate modal" id="loginModal">
<h1>Login</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="loginUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="loginPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="button">
<input type="submit" id="loginSubmit" placeholder=" " value="Login">
</label>
Password forgot?
</form>
</div>
<div class="registerModal modal-animate modal-hidden" id="registerModal">
<h1>Register</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="registerUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="registerPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="userfield">
<input type="password" id="registerPasswordRepeat" placeholder=" ">
<p>Password repeat</p>
</label>
<label class="button">
<input type="submit" id="registerSubmit" placeholder=" " value="Register">
</label>
</form>
</div>
</div>
After some more experimenting I finally got the solution.
function toggleRegister() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
registerPageTitle = "Invictus - Registreren";
loginPageTitle = "Invictus - Inloggen";
if (register.style.display === "block") {
loginModal.classList.remove("visible");
registerModal.classList.add("visible");
register.style.display = "none";
login.style.display = "block";
document.title = registerPageTitle;
} else {
loginModal.classList.add("visible");
registerModal.classList.remove("visible");
register.style.display = "block";
login.style.display = "none";
document.title = loginPageTitle
}
}
function toggleLogin() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
registerPageTitle = "Invictus - Registreren";
loginPageTitle = "Invictus - Inloggen";
if (login.style.display === "block") {
loginModal.classList.add("visible");
registerModal.classList.remove("visible");
register.style.display = "block";
login.style.display = "none";
document.title = loginPageTitle
} else {
loginModal.classList.remove("visible");
registerModal.classList.add("visible");
register.style.display = "none";
login.style.display = "block";
document.title = registerPageTitle;
}
}
.header a.register {
display: block;
transition: color 0.2s;
}
.header a.login {
display: none;
transition: color 0.2s;
}
.modal-void {
display: flex;
position: relative;
justify-content: center;
align-content: center;
align-items: center;
flex: 1;
}
.loginModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 0px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
opacity: 0;
transition: max-height 1s 0.5s ease-out, opacity 0.5s;
}
.registerModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 0px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
opacity: 0;
transition: max-height 1s 0.5s ease-out, opacity 0.5s;
}
.visible {
max-height: 550px;
opacity: 1;
transition: max-height 1s 0.5s ease-out, opacity 0.5s;
}
<div class="header">
<a class="register" id="register" onclick="toggleRegister()">Register</a>
<a class="login" id="login" onclick="toggleLogin()">Login</a>
</div>
<div class="modal-void">
<div class="loginModal visible" id="loginModal">
<h1>Login</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="loginUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="loginPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="button">
<input type="submit" id="loginSubmit" placeholder=" " value="Login">
</label>
Password forgot?
</form>
</div>
<div class="registerModal" id="registerModal">
<h1>Register</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="registerUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="registerPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="userfield">
<input type="password" id="registerPasswordRepeat" placeholder=" ">
<p>Password repeat</p>
</label>
<label class="button">
<input type="submit" id="registerSubmit" placeholder=" " value="Register">
</label>
</form>
</div>
</div>
I want to add some text as well as a picture if possible after a user does not type in a string with the "#" symbol, then separate text telling the user that they did not type in an email.
I have not tried anything yet. I just want to receive a some information that will point me in the right direction.
This is the html and js code:
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("fname").classList.add('error');
return false;
}
}
</script>
<div class="ocean">
<div class="wave"/>
<div class="wave"/>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" id="fname" name="fname"
placeholder="enter email" onblur="validateForm()" />
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password" />
<br />
<input type="submit" value="Submit" />
<br />
<a href="#">
Lost your password?
</a>
<br />
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
This is the css code:
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border-bottom:2px solid red !important;
}
The expected output is that when a user clicks off the email textbox and the email they filled out does not have "#", a text should all of a sudden appear bellow the textbox stating that the user did not enter an email. I have not tried to implement any code for this to happen, I just want someone to help me by pointing me in the right direction (I have tried to research this but I could not find anything).
You can use input type = 'email' and use pattern and title attribute to get perfect validation
<p id="nameT"> email </p>
<input type="email" id="fname" name="fname" placeholder="enter email" pattern="^[^\s#]+#[^\s#]+\.[^\s#]+$" title="enter valid email address" onkeyup="myFunction(event)">
<script>
function myFunction(e) {
if (e.target.validity.valid) {
console.log('input type email is valid');
// rest of your javascript code
}
</script>
in this way you get perfact validation for email field
You may try below code:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("email_error").style.display="inline-block";
document.getElementById("fname").classList.add('error');
return false;
}
}
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border-bottom:2px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" id="fname" name="fname"
placeholder="enter email" onblur="validateForm()">
<span id="email_error" style="display:none">user did not enter an email</span>
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
Simply You can use to validate email # using <input type="email" id="fname" name="fname"
placeholder="enter email" required>
If you want a simple email validation
<input type="email" name="email" required>
It's a browser default validation
Working code
<form>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>
I am creating a multi form.
When I do not input any words and click the next button, the system has a display function validation but it also goes to next page automaticly.
So, what I need todo, is detect when I input a wrong format or empty string, so the system will make a validation and not automaticly go to the next page.
Finally, how can I click the submit button have the system save all my form data?
Here's is my script:
function page1() {
var name = document.forms["form1"]["name"].value
var email = document.forms["form1"]["email"].value
if (name == "" || !isNaN(name)) {
alert("Please enter correct name");
return false;
}
if (email.match(/^[\w\d._-]+#[\w\d.-]+\.[\w\d]{2,6}$/)) {
} else {
alert("Please enter correct email");
return false;
}
}
function page2() {
var phone = document.forms["form1"]["phone"].value
var address = document.forms["form1"]["address"].value
if (address == "" || !isNaN(address)) {
alert("Please enter correct address");
return false;
}
if (phone == "" || phone.length <= 9 || phone.length > 13 || isNaN(phone)) {
alert("Please enter correct phone");
return false;
}
return true;
}
function page3() {
var password = document.forms["form1"]["password"].value
var password2 = document.forms["form1"]["password"].value
if (password.match(/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%]).{8,15})/)) {
} else {
alert("Please enter correct password");
return false;
}
if (password1 != password2) {
alert("Password and Re-enter Password was not same");
return false;
}
return true;
}
$(document).ready(function() {
$(".form-wrapper .button1").click(function() {
$(this).closest("form1").find("input[type=text], input[type=password]").val("");
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
submit = $(this);
});
if (currentSectionIndex === 3) {
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
$(document).ready(function() {
$(".form-wrapper .button2").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").prev().addClass("is-active");
headerSection.removeClass("is-active").prev().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
this.submit();
});
if (currentSectionIndex === 3) {
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
font-weight: 200;
}
a {
text-decoration: none;
}
p,
li,
a {
font-size: 14px;
}
fieldset {
margin: 0;
padding: 0;
border: none;
color: #fff;
}
/* GRID */
.twelve {
width: 100%;
}
.eleven {
width: 91.53%;
}
.ten {
width: 83.06%;
}
.nine {
width: 74.6%;
}
.eight {
width: 66.13%;
}
.seven {
width: 57.66%;
}
.six {
width: 49.2%;
}
.five {
width: 40.73%;
}
.four {
width: 32.26%;
}
.three {
width: 23.8%;
}
.two {
width: 15.33%;
}
.one {
width: 6.866%;
}
/* COLUMNS */
.col {
display: block;
float: left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container {
width: 100%;
max-width: 700px;
margin: 0 auto;
position: relative;
}
.row {
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper {
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000;
text-align: center;
}
.steps li {
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active {
border-bottom: 1px solid #fff;
color: #fff;
}
/* FORM */
.form-wrapper .section {
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #000;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
position: absolute;
width: 100%;
min-height: 300px
}
.form-wrapper .section h3 {
margin-bottom: 30px;
}
.form-wrapper .section.is-active {
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button1,
.form-wrapper .submit {
background-color: #fff;
display: inline-block;
padding: 8px 30px;
color: #000;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .button2 {
background-color: #fff;
display: inline-block;
padding: 8px 30px;
color: #000;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
left: 20px;
bottom: 20px;
}
.form-wrapper .submit {
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"] {
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div class="container">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper" id="form1" onsumbit="return submit1()">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<input class="button1" type="button" value="Next" onclick="return page1()">
</fieldset>
<fieldset class="section">
<h3>other Details</h3>
<input type="text" name="phone" id="phone" placeholder="Phone">
<input type="text" name="address" id="address" placeholder="address">
<input class="button2" type="button" value="Previous">
<input class="button1" type="button" value="Next" onclick="return page2()">
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="button2" type="button" value="Previous">
<input class="submit button1" type="submit" value="Sign Up" onclick="return page3()">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button1">Reset Form</div>
</fieldset>
</form>
</div>
</div>
You do not need onclick event on the button of the page1, page2, page3.
remove onclick="return page1()" call the functions
Just use one event onclick and it should work, add classes to check the validations, this is what I did.
if ($(this).hasClass('page1')) {
if (!page1()) {
return;
}
}
else if ($(this).hasClass('page2')) {
if (!page2()) {
return;
}
}
else if ($(this).hasClass('page3')) {
if (!page3()) {
return;
}
}
function page1() {
var name = document.forms["form1"]["name"].value
var email = document.forms["form1"]["email"].value
if (name == "" || !isNaN(name)) {
alert("Please enter correct name");
return false;
}
if (email.match(/^[\w\d._-]+#[\w\d.-]+\.[\w\d]{2,6}$/)) {
} else {
alert("Please enter correct email");
return false;
}
return true;
}
function page2() {
var phone = document.forms["form1"]["phone"].value
var address = document.forms["form1"]["address"].value
if (address == "" || !isNaN(address)) {
alert("Please enter correct address");
return false;
}
if (phone == "" || phone.length <= 9 || phone.length > 13 || isNaN(phone)) {
alert("Please enter correct phone");
return false;
}
return true;
}
function page3() {
var password = document.forms["form1"]["password"].value
var password2 = document.forms["form1"]["password"].value
if (password.match(/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%]).{8,15})/)) {
} else {
alert("Please enter correct password");
return false;
}
if (password1 != password2) {
alert("Password and Re-enter Password was not same");
return false;
}
return true;
}
$(document).ready(function() {
$(".form-wrapper .button1").click(function() {
if ($(this).hasClass('page1')) {
if (!page1()) {
return;
}
}
else if ($(this).hasClass('page2')) {
if (!page2()) {
return;
}
}
else if ($(this).hasClass('page3')) {
if (!page3()) {
return;
}
}
$(this).closest("form1").find("input[type=text], input[type=password]").val("");
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
submit = $(this);
});
if (currentSectionIndex === 3) {
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
$(document).ready(function() {
$(".form-wrapper .button2").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").prev().addClass("is-active");
headerSection.removeClass("is-active").prev().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
this.submit();
});
if (currentSectionIndex === 3) {
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
font-weight: 200;
}
a {
text-decoration: none;
}
p,
li,
a {
font-size: 14px;
}
fieldset {
margin: 0;
padding: 0;
border: none;
color: #fff;
}
/* GRID */
.twelve {
width: 100%;
}
.eleven {
width: 91.53%;
}
.ten {
width: 83.06%;
}
.nine {
width: 74.6%;
}
.eight {
width: 66.13%;
}
.seven {
width: 57.66%;
}
.six {
width: 49.2%;
}
.five {
width: 40.73%;
}
.four {
width: 32.26%;
}
.three {
width: 23.8%;
}
.two {
width: 15.33%;
}
.one {
width: 6.866%;
}
/* COLUMNS */
.col {
display: block;
float: left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container {
width: 100%;
max-width: 700px;
margin: 0 auto;
position: relative;
}
.row {
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper {
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000;
text-align: center;
}
.steps li {
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active {
border-bottom: 1px solid #fff;
color: #fff;
}
/* FORM */
.form-wrapper .section {
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #000;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
position: absolute;
width: 100%;
min-height: 300px
}
.form-wrapper .section h3 {
margin-bottom: 30px;
}
.form-wrapper .section.is-active {
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button1,
.form-wrapper .submit {
background-color: #fff;
display: inline-block;
padding: 8px 30px;
color: #000;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .button2 {
background-color: #fff;
display: inline-block;
padding: 8px 30px;
color: #000;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
left: 20px;
bottom: 20px;
}
.form-wrapper .submit {
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"] {
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div class="container">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper" id="form1" onsumbit="return submit1()">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<input class="button1 page1" type="button" value="Next">
</fieldset>
<fieldset class="section">
<h3>other Details</h3>
<input type="text" name="phone" id="phone" placeholder="Phone">
<input type="text" name="address" id="address" placeholder="address">
<input class="button2" type="button" value="Previous">
<input class="button1 page2" type="button" value="Next" onclick="return page2()">
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="button2" type="button" value="Previous">
<input class="submit button1 page3" type="submit" value="Sign Up" onclick="return page3()">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button1">Reset Form</div>
</fieldset>
</form>
</div>
</div>
by doing this you will be able to apply your code easily and you do not have to find multiple places to be appear.