We Keep Coding

Javascript code style property value not updating after Ajax call

I have JS code where I am changing the style of an HTML element based on an AJAX response.
So my code looks like this.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0];
button_submit.style.cursor = '\"' + response[1] + '\"';
button_submit.style.marginTop = '\"' + response[3] + '\"';
document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
But the style is not changing even after all of the JS function is finished.
I wonder what is wrong with my code.
The response of the AJAX is an array that I am going to put on style properties using JS.
Sample response:
['false', 'pointer', 'hidden', '-3%']

The string 'false' is not the same as the boolean false. The disabled property should be a boolean.
You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0] === 'true';
button_submit.style.cursor = response[1]';
button_submit.style.marginTop = response[3];
document.getElementById("email").style.visibility = response[2];
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>

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;
}

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();
}
});

Validation for inputs in jquery using regex

i was creating a simple form which has two inputs Name and Email on submit if i write numbers in name input then it will show number is not allowed message as like required message same as in email
Fiddle:https://jsfiddle.net/p6ohxxxe/
please help me out of this problem your help will be appreciated
HTML
<div class="form-container">
<form action="" id="my-form" name="myForm">
<div class="form-row">
<div class="input-container">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-input" name="name" placeholder="Enter your Name">
</div>
</div>
<div class="form-row">
<div class="input-container">
<label for="Email" class="form-label">Email:</label>
<input type="text" class="form-input" name="email" placeholder="Enter your Email">
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
js
$("form[name='myForm']").validate({
rules: {
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"please Enter your Name",
email:"Please Enter a valid Email Address"
},
submitHandler: function(form) {
form.submit();
}
});
css
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin:30px auto;
max-width: 50%;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width:100%;
padding: 14px;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
}
.error{
color:red;
border-color: red;
padding: 3px 2px;
}

I dont know if I understand your question, but using the validate plugin, you can create additional validation rules and use regex as the validation parameter. I'm using this code:
jQuery.validator.addMethod("regex", function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},"Invalid Data");
And input:
<input required="" data-rule-regex="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" title="Enter a valid IPV4" name="ip" type="text">