We Keep Coding

Jquery appendTo html to a javascript function

building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.
Whenever the Html is added by appendTo the Javascript function can not find the added HTML.
code: https://codepen.io/edutize/pen/qBZXmOZ
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw
fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});

You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password, #caps doesn't exists yet.
Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.
// Jquery appendTo capslock message and eye icons html
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
// toggle between classes and change attribute type
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
// capslock function change style from display none to block
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
});
.login-username input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-username input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=password] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=password]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
#caps {
display: none;
margin-left: auto;
margin-right: auto;
width: 50%;
color: red;
}
.field-icon {
margin-left: 72.5%;
margin-right: auto;
z-index: 2;
position: absolute;
margin-top: -40px;
color: #8A8A8A;
}
.login-submit input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #24af61;
border: #24af61;
border-radius: 5px !important;
border-width: 1.5px;
color: white;
cursor: pointer;
display: block;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
transition: 0.3s;
font-weight: bold;
margin: 30px auto;
}
.login-submit input[type=submit]:hover {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
transform: scale(1.05);
color: #24af61;
border-style: solid;
border: #24af61;
border-width: 1.5px;
border-radius: 15px;
}
#media screen and (max-width: 767px) {
.login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] {
width: 75%;
}
#media screen and (max-width: 767px) {
.field-icon {
margin-left: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
<!-- html thats being added by jquery appendTo -->
<!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<p id="caps">WARNING! Caps lock is ON.</p> -->
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
</div>

VueJS template - Flip between Login Form & Register Form

I am trying to Flip between 'Login Form' & 'Register Form'. I tried to use code which I came across on codepen Flat HTML5/CSS3 Login Form. The code works just fine, but when I integrate the HTML code within a Vue Template the Form does not flip to the 'Create an account' form. I have observed that there is something to correct in the JavaScript but I am not able to understand exactly what.
My code is as below:
HTML
<template id="login-page"> // PROBLEM When this Tag is added and called using VueJS component
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
</template> // PROBLEM When this Tag is added and called using VueJS component
VueJS
// Vue component: login-page
const LoginPage = {
template: '#login-page',
data() {
return {
login_message: 'Please enter your credentials to login.',
loginStage: 'login-form',
}
},
}
JavaScript
<script>
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>
CSS
<style>
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

While #Fred has accepted #chr's answer, this is (still) a mis-use of Vue.
(Note this not an attempt to reproduce the working fiddle, but to answer the general question of how to Flip between 'Login Form' & 'Register Form' using a more Vue-oriented approach)
In the Vue way of doing things the switch between the login form and the register form should be done with markup, using Vue conditional rendering rather than calling functions showRegisterForm() and showLoginForm().
toggleForm doesn't require a parameter because the model knows what the value of currentForm is already.
An if and else is the simplest approach, making use of a property in your Vue model, such as currentForm: 'login' that chr introduced in their answer.
The HTML needs only slight changes
<div id="login-page" class="login-page">
<div class="form">
<form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered?
Sign In</p>
</form>
<form v-else class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered?
Create an account</p>
</form>
</div>
</div>
A partial look at the model needed for this could be
const model = new Vue({
data : {
'currentForm' : 'login',
...
},
...
methods : {
toggleForm() {
this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
}
},
...
});
When the value of currentForm changes Vue will take care of changing which of the forms will display.
Also see the answer to the question VueJS - Swap component on click for a more generalized approach.

You are mixing up the use of Vue as library and Vue as framework. It looks like, you are actually trying to use Vue as library, so I changed the code accordingly, here is myfiddle. You can just need to add a transition, for more information look into the documentation Enter/Leave & List Transitions.
HTML:
<div id="login-page" class="login-page">
<div class="form">
<form class="register-form" v-show="showRegisterForm">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form" v-show="showLoginForm">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
JS:
new Vue({
el: '#login-page',
data() {
return {
login_message: 'Please enter your credentials to login.',
loginStage: 'login-form',
currentForm: 'login',
}
},
computed: {
showRegisterForm() {
return this.currentForm === 'register';
},
showLoginForm() {
return this.currentForm === 'login';
},
},
methods: {
toggleForm(formName) {
this.currentForm = formName;
},
},
});
CSS:
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#chr solutions works for me except the the first two lines of the JavaScript code that had to be changed since in my case I have an existing Vue which calls the Login Component which then activates the Login Template.
JavaScript
// Vue component: login-page
const LoginPage = {
template: '#login-page',
data() {
return {
login_message: 'Please enter your credentials to login.',
currentForm: 'login',
}
},
computed: {
showRegisterForm() {
return this.currentForm === 'register';
},
showLoginForm() {
return this.currentForm === 'login';
},
},
methods: {
toggleForm(formName) {
this.currentForm = formName;
},
},
}

Stephen P's code works as well and is much neater, except that the first form should have the register in single quotes i.e. 'register', which is corrected below.
HTML
<div id="login-page" class="login-page">
<span><h1>{{currentForm.toUpperCase()}} FORM</h1></span>
<span><h5>Please enter your credentials to {{currentForm.toLowerCase()}}.</h5></span>
<div class="form">
<form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form v-else class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
JavaScript
// Vue component: login-page
const LoginPage = {
template: '#login-page',
data() {
return {
currentForm: 'login',
}
},
methods: {
toggleForm()
{
this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
}
},
}
CSS
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Validation and button problem before next page

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.

How to use the "enter" key to progress through a form and also have clicking a button as an option as well on a mutli-step form

I have a multi-step form that has several different slides of different input fields. I'm trying to get it so that when the user presses "enter" after filling out the input, the form will progress to the next slide. I also want the button, when clicked, to also progress the form (this is what I currently have as the functionality). I can't figure out how to include the "enter" function because everything I have seen involves the .keydown method.
Here's what I have thus far:
<script>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
var arrayfname = ['#txt_first_name'];
var arraylname = ['#txt_last_name'];
var arrayzip = ['#txt_zip'];
var arrayaddress = ['#txt_address'];
var arrayphone = ['#txt_phone'];
var arraydob = ['#hdn_dob'];
$('.next').click(function(){
if(animating) return false;
if($(this).data('slide') == "1") {
moveon = RegPath.Functions.validateFields(arrayfname,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "2"){
moveon = RegPath.Functions.validateFields(arraylname,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "3"){
moveon = RegPath.Functions.validateFields(arrayzip,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "4"){
moveon = RegPath.Functions.validateFields(arrayaddress,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "5"){
moveon = RegPath.Functions.validateFields(arrayphone,false,"",'[{access_token}]');
}
//var moveon = RegPath.Functions.validateFields(arrayPersonalInfo,false,"",'[{access_token}]');
if(moveon == false){
return false;
}
else
{
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
}
});
$('.submitForm').click(function(){
var popUpURL = '{{{offer.linkout_url}}}';
var moveon = RegPath.Functions.validateFields(arraydob,true,popUpURL,'[{access_token}]');
});
</script>
<script>
$(function(){
RegPath.PrepForm.prepFormPersonal();
RegPath.PrepForm.prepFormContact();
});
</script>
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
}
body {
font-family: montserrat, arial, verdana;
background: url('[{offer_cdn_url}]/images/cag/cag_purp_bg.jpg') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/*form styles*/
#msform {
width: 465px;
margin: 29px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: rgba(255, 255, 255, 0.7);
border: 0 none;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
width: 465px;
margin: 0 0%;
padding-top: 0%;
padding-bottom: 4%;
/*stacking fieldsets above each other */
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
.header {
background: #f6cc27;
padding-top: 4%;
padding-bottom: 4%;
margin-bottom: 3%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 1%;
padding-right: 1%;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 90%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 16px;
margin-top: 3%;
margin-left: 3%;
margin-right: 3%;
}
p {
font-size: 0.6em;
text-align: left;
}
/*
input#txt_zip {
width: 40%;
float: left;
}
label#zip {
width: 100%;
display: inline-flex;
float: left;
}
input#txt_dob {
width: 50%;
float:left;
}
label#dob {
width: 100%;
display:inline-flex;
float: left;
}
*/
/*buttons*/
#msform .action-button {
width: 90%;
background-image: linear-gradient(#009b00, #00c800);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 30px;
cursor: pointer;
padding: 17px 5px;
margin: 10px 5px;
font-size: 19px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#msform .disabledSubmit {
background-color: #9f9e9e;
}
input.submit {
background-image: linear-gradient(#009b00, #00c800);
color: #ffffff !important;
border-radius: 30px !important;
cursor: pointer;
padding: 17px 5px !important;
font-size: 19px !important;
font-weight: 700;
}
/*headings*/
.fs-title {
font-size: 21px !important;
text-transform: uppercase;
color: #000000;
font-weight: 700;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
.tcpaCopy {
font-size: 8px;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
}
.disabled {
background-color: #e5e5e5;
color: #969696 !important;
}
.check {
display: inline-flex;
}
label {
font-size: 1.1em;
padding-bottom: 3%;
font-weight: 700;
padding-top: 2%;
}
.green {
background-color: #27AE60 !important;
}
#msform .tcpaSubmit:hover, #msform .tcpaSubmit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 16%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #f6cc27;
color: white;
}
input#opt_in {
width: 11% !important;
}
.record_table {
width: 100%;
border-collapse: separate;
}
.record_table tr:hover {
cursor: pointer;
}
td#consent {
width: 30%;
padding-top: 3%;
padding-bottom: 3%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #f6cc27;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #ffffff;
border-color: #f6cc27;
}
#space {
margin-top: 2%;
}
td#consentInfo {
border-left-color: #ffffff;
font-size: 0.8em;
vertical-align: middle !important;
}
.record_table td {
border: 1px solid #eee;
}
#media only screen and (max-width: 768px) {
#msform {
width: 80%;
}
#msform fieldset {
width: 100%;
}
.fs-title {
font-size: 20px;
}
input:matches([type=button]) {
-webkit-appearance: none;
}
.subcopy {
font-size: 1.5em !important;
}
#subtitle {
font-size: 1.1em !important;
}
#logo {
width: 200px;
}
}
/* TOP OF THE PAGE */
.subcopy {
margin-top: 10px;
padding-bottom: 0;
font-size: 2.5em;
color: #F6CC27;
font-family: 'Kanit', sans-serif;
font-weight: bold;
text-align: center;
}
#subtitle {
text-align: center;
color: #ffffff;
font-family: 'Kanit', sans-serif;
font-size: 2em;
}
#logo {
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 2%;
}
<div class="container">
<div class="logo">
<img src="[{offer_cdn_url}]/images/cag/CAG_logo#2x copy.png" id="logo">
</div>
<div class="questions subcopy" > YOU MAY BE ENTITLED TO $1000 OR MORE </div>
<div id="subtitle">Over $1 Billion of Class Action Settlement Funds</div>
</div>
<div class="container">
<!-- multistep form -->
<form id="msform" method="post" action="/api/register">
<!--Needed-->
<input type="hidden" name="remotePenCriteriaPassed" id="remotePenCriteriaPassed" value="false" />
<input type="hidden" name="zip_lookup_done" id="zip_lookup_done" value="" />
<!-- progressbar
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<!--<h3 class="fs-subtitle">Step 1:</h3>-->
<label for="txt_first_name">First Name</label>
<input type="text" name="first_name" id="txt_first_name" value="[{first_name}]" placeholder="First Name" required/>
<div class="help-block with-errors">Please enter your first name</div>
<input type="button" name="next" class="next action-button" data-slide="1" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_last_name">Last Name:</label>
<input type="text" name="last_name" id="txt_last_name" value="[{last_name}]" placeholder="Last Name" required/>
<div class="help-block with-errors">Please enter your last name</div>
<input type="button" name="next" class="next action-button" data-slide="2" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_zip" id="zip">Zip Code:</label>
<input type="tel" name="zip" id="txt_zip" value="[{zip}]" placeholder="Zip Code" required/>
<div class="help-block with-errors">Please enter a valid zip code</div>
<input type="button" name="next" class="next action-button" data-slide="3" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_address">Address:</label>
<input type="text" name="address_1" id="txt_address" value="[{address_1}]" placeholder="Address" required/>
<div class="help-block with-errors">Please enter a valid address</div>
<input type="button" name="next" class="next action-button" data-slide="4" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_phone">Phone:</label>
<input type="tel" name="phone" id="txt_phone" value="[{phone}]" placeholder="Phone Number (123) 456-7890" required/>
<div class="help-block with-errors">Please enter a valid phone number</div>
<input type="button" name="next" class="next action-button" data-slide="5" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_dob" id="dob">Date of Birth:</label>
<input type="tel" name="dob" id="hdn_dob" value="[{dob}]" placeholder="Birthday (mm/dd/yyyy)" required/>
<div class="help-block with-errors">Please enter a valid date</div>
<input type="button" id="btnSubmit" class="submit submitForm submit-btn" value="CLAIM YOUR CASH" />
</fieldset>
</form>
</div>

I don't think you can do this without using the .keydown method or a similar method. Still it is quite easy to implement. Not sure if you are trying to avoid it for a particular reason, but if it is a matter not knowing how to implement it, please find the code below.
$(document).keypress(function(e) {
if(e.which == 13) {
// Just add your validation code here.
}
});

In case anyone is looking for a solution: this is what ended up working
$('input').keypress(function(e){
if(e.which == 13){//Enter key pressed
var Input = $(this).data('slide');
$('*[data-slide="'+Input+'"]').click();
}
});

Forms - Auto fill making email validation fail

In my form, when the user fills out the email portion, if the email has been previously used and auto fill puts in the information the email shows up as invalid. How can I change the javascript or JQuery so it does not do this? Any help would be much appreciated!
[![enter image description here][1]][1]
[enter link description here][2]
[1]: https://i.stack.imgur.com/nQD04.png
[2]: http://jsfiddle.net/M6N24/532/
<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<label>First Name
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Last Name
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Email
<span class="error">Please enter a valid email address</span>
<input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
</label>
<label>Phone
<span class="error">Please enter a valid phone number</span>
<input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>City
<input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>State/Province
<input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label id="co">Company
<input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Comments
<textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
<input id="sub" type="submit" disabled="disabled" />
</label>
<div>
<select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
<option value="">--None--</option>
<option selected="selected" value="Visiant">Visiant</option>
<option value="Tessellate">Tessellate</option>
</select><br>
<select hidden="true" id="lead_source" name="lead_source">
<option value="">--None--</option>
<option value="Internal">Internal</option>
<option value="Trade Show">Trade Show</option>
<option selected="selected" value="Website">Website</option>
<option value="Direct Marketing">Direct Marketing</option>
<option value="Social Media">Social Media</option>
<option value="Other">Other</option>
</select><br>
</div>
</form>
body {
color: #fff;
background-color: #30bda6;
text-align: center;
}
form {
color: #fff;
background-color: #30bda6;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input {
font-size: 15px;
height: 48px;
margin-top: 8px;
}
input[type="tel"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
height: 48px;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
}
input:focus {
background-color: #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
input[type="tel"]:focus {
background-color: #fff;
}
input[type="tel"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
}
textarea {
width: 100%;
background-color: #30bda6;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
font-size: 15px;
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
#sub2 {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, 65%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] .fa {
opacity: 1;
color: #00594C;
}
[data-valid="valid"] .fa {
color: #00594C;
}
[data-valid="error"] .fa {
color: #AB0000;
}
.error {
display: none;
color: #AB0000;
font-size: .7em;
position: absolute;
left: 10px;
top: 0;
transform: translateY(150%);
font-size: 12px;
margin-top: 2px;
}
[data-valid="error"] .error {
display: block;
}
input#sub2:not([disabled]){
background-color: #fff;
color: #00AB8E;
}
input#sub:not([disabled]){
background-color: #fff;
color: #F68D2E;;
}
#thankyou { display:none;}
#thankyou.success {
display: block;
text-align: center;
}
#tessellate-page input:focus {
background-color: #fff !important;;
}
#tessellate-page textarea:focus {
background-color: #fff !important;;
}
#tessellate-page input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
}
#comments_label {
margin-top: 8px;
}
#media (max-width: 656px) {
label {
width: 98%;
height: 70px;
}
.fa {
transform: translate(-50%, -45%);
}
}
#media (min-width: 656px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
label {
margin-bottom: 20px;
}
}
function phoneNumber(phone) {
var phoneno = /^\d{9}|\d{10}|\d{11}$/;
return phoneno.test(phone);
}
$('input[type="tel"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$('input[type="text"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
test = function() {
if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
$("#sub").removeAttr("disabled");
}
}

You are checking email validation on textbox keyup event, but jquery does not consider autofill as a keyup event. It can not even read the filled value using autofill.

Instead of keyup event, you can use focusout event to solve your issue.
Here is the updated jsfiddle
function phoneNumber(phone) {
var phoneno = /^\d{9}|\d{10}|\d{11}$/;
return phoneno.test(phone);
}
$('input[type="tel"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$('input[type="text"]').on('focusout', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
test = function() {
if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
$("#sub").removeAttr("disabled");
}
}
body {
color: #fff;
background-color: #30bda6;
text-align: center;
}
form {
color: #fff;
background-color: #30bda6;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input {
font-size: 15px;
height: 48px;
margin-top: 8px;
}
input[type="tel"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
height: 48px;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
}
input:focus {
background-color: #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
input[type="tel"]:focus {
background-color: #fff;
}
input[type="tel"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
}
textarea {
width: 100%;
background-color: #30bda6;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
font-size: 15px;
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
#sub2 {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, 65%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] .fa {
opacity: 1;
color: #00594C;
}
[data-valid="valid"] .fa {
color: #00594C;
}
[data-valid="error"] .fa {
color: #AB0000;
}
.error {
display: none;
color: #AB0000;
font-size: .7em;
position: absolute;
left: 10px;
top: 0;
transform: translateY(150%);
font-size: 12px;
margin-top: 2px;
}
[data-valid="error"] .error {
display: block;
}
input#sub2:not([disabled]) {
background-color: #fff;
color: #00AB8E;
}
input#sub:not([disabled]) {
background-color: #fff;
color: #F68D2E;
;
}
#thankyou {
display: none;
}
#thankyou.success {
display: block;
text-align: center;
}
#tessellate-page input:focus {
background-color: #fff !important;
;
}
#tessellate-page textarea:focus {
background-color: #fff !important;
;
}
#tessellate-page input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
}
#comments_label {
margin-top: 8px;
}
#media (max-width: 656px) {
label {
width: 98%;
height: 70px;
}
.fa {
transform: translate(-50%, -45%);
}
}
#media (min-width: 656px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
label {
margin-bottom: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<label>First Name
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Last Name
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Email
<span class="error">Please enter a valid email address</span>
<input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
</label>
<label>Phone
<span class="error">Please enter a valid phone number</span>
<input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>City
<input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>State/Province
<input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label id="co">Company
<input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Comments
<textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
<input id="sub" type="submit" disabled="disabled" />
</label>
<div>
<select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
<option value="">--None--</option>
<option selected="selected" value="Visiant">Visiant</option>
<option value="Tessellate">Tessellate</option>
</select><br>
<select hidden="true" id="lead_source" name="lead_source">
<option value="">--None--</option>
<option value="Internal">Internal</option>
<option value="Trade Show">Trade Show</option>
<option selected="selected" value="Website">Website</option>
<option value="Direct Marketing">Direct Marketing</option>
<option value="Social Media">Social Media</option>
<option value="Other">Other</option>
</select><br>
</div>
</form>

I would suggest disabling auto fill functionality with some tricks if this is bothering you. Handling a browser functionality with DOM is not always a good way.
Chrome is ignoring read-only fields for auto fill. You can load your input fields as read-only and on hover make them editable
<input type="email" name="email" readonly>