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>
Related
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>
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>
This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 2 years ago.
I am trying to show a form with a add button and on clicking it the display property should be toggled.
But whenever I click on the button i am getting Navigated to "Link Address" in my console ,so I placed a
console.log there which gets triggered.I dont understand where I am going wrong.
This is my code snippet:
function addForm(){
console.log("triggered");
var x= document.getElementById("add-form");
if(x.style.display === "none"){
x.style.display="grid";
}
else
x.style.display="none";
}
.form-box{
display: grid;
grid-template-columns: repeat(20,50px);
grid-template-rows: repeat(40,50px);
width: 100%;
}
.heading{
font-size: 22px;
font-weight: 600px;
grid-row: 2/3;
grid-column: 3/6;
}
.line{
height: 2px;
background: #F2F2F2 0% 0% no-repeat padding-box;
opacity: 1;
width: 100%;
opacity: 1;
grid-row: 3/4;
grid-column: 3/15;
}
.form{
grid-column: 3/12;
grid-row:4/10;
display: grid;
grid-auto-rows: 50px;
}
.same-line{
display: flex;
align-items: center;
}
.full{
flex:1;
}
.btn-add{
border: none;
outline: none;
background: none;
cursor: pointer;
}
.btn-add:hover{
color: #F08520;
}
.add-form{
grid-row:12/16;
display: none;
}
.btn-submit{
grid-row: 18/19;
grid-column:10/12;
display: flex;
justify-content: center;
}
.btn-style{
border: none;
outline: none;
background: #F08520;
width: 90px;
border-radius: 7px;
color: white;
}
.btn-style:hover{
color: aqua;
}
.select-input{
height: 35px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
color: #AAAAAA;
}
.form-input{
height: 35px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
}
.form-textarea{
height: 70px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
resize: none;
}
.label{
font-size: 15px;
color: #666;
padding-top: 10px;
font-family: 'Nunito Sans', sans-serif;
}
<div class="form-box">
<p class="heading">Form Elements</p>
<div class="line"></div>
<form class="form">
<label class="label">First Name</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Last Name</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Age</label>
<input class="form-input" type="text" name="" id="">
<div class="same-line">
<label class="label full">Instances</label>
<button class="btn-add" onclick="addForm()">add</button>
</div>
<label class="label">Address</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Type</label>
<select class="select-input" name="" id="">
<option value="">Home</option>
<option value="">office</option>
<option value="">others</option>
</select>
<div id="add-form" class="add-form">
<label class="label">Address2</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Type</label>
<select class="select-input" name="" id="">
<option value="">Home</option>
<option value="">office</option>
<option value="">others</option>
</select>
</div>
<label class="label">comments</label>
<textarea class="form-textarea"></textarea>
</form>
<div class="btn-submit">
<button class="btn-style">Submit</button>
</div>
<div id="new">
</div>
</div>
Button element in form will automatically submit the form when clicked. You need to set its type as button.
<button class="btn-add" onclick="addForm()" type="button">add</button>
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 didn't write the form but the css is only 8 lines + bootstraps form control and then some classes for the javascript but I cannot figure out why the place holder text bit, or actually it's parent div, is becoming 60px or so in height, there is only 15px padding top and bottom and then a margin for the placeholder text. I've gone through form-control and there's no styles for height so I just can't figure it out. If you could have a look that'd be great.
http://danceforovariancancer.com.au#perform
Here's the contact form html and it's css but I'd recomend inspecting element because there's no answers in the css as far as I can tell :o
<section id="perform">
<div class="container-fluid apply">
<div class="text-center row">
<h1>Want to perform? Sign up here</h1>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="col-lg-4">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
and css
.apply {
background-color: #0094ab;
}
.form-control {
color: #fff !important;
}
.floating-label-form-group {
position: relative;
margin-bottom: 5px;
margin-top: 5px;
/* padding-bottom: .5em; */
border-bottom: 1px solid #eee;/* color: #0094ab; */
}
.floating-label-form-group input, .floating-label-form-group textarea {
z-index: 1;
color: #fff;
position: relative;
padding-right: 0;
padding-left: 0;
border: 0;
border-radius: 0;
font-size: 1.5em;
background: rgba(255, 255, 255, 0.24);
box-shadow: none!important;
resize: none;
}
.floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: .85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease, opacity .3s ease;
-moz-transition: top .3s ease, opacity .3s ease;
-ms-transition: top .3s ease, opacity .3s ease;
transition: top .3s ease, opacity .3s ease;/* color: #fff; */
}
.floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
.floating-label-form-group-with-focus label {
color: #80bc18;
}
form .row:first-child .floating-label-form-group {
border-top: 1px solid #eee;
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
/* font-size: 12px; */
}
You have hidden labels (opacity:0) which takes the space. Actually Opacity:0 hides the element (here: the labels), but reserves the space. You can use display:none instead, to completely hide an element.
I hope this helps.
As others have said the problem is caused by the hidden label.
If you're looking for a quick fix, here's what I would do:
In your mystyles.css add top margin for .form-control.
.form-control {
margin-top: -10px;
}
Apply following changes
label {
opacity: 1 !important;
top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
border: 0 none;
border-radius: 3px;
box-shadow: none !important;
color: #fff;
font-size: 1.5em;
padding-left: 5px;
padding-right: 0;
position: relative;
resize: none;
z-index: 1;
}
.form-control {
color: #fff !important;
line-height: 1.5;
}