I want my 'sales bar' to slid-up after the user click the close 'x' button.
it was all working fine -with the close button - but then I added a form, and if I put the close button inside the form (to get it in-line) then the slideUp only last a second, and the bar slides back down - it should stay 'gone'.
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
</style>
</head>
<body>
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast');
});
}
});
</script>
</body>
</html>
(credit to https://www.buildersociety.com/threads/hellobar-free-alternative-devseries.1519/)
To be clear; If I make this modification (below) moving the close button outside the form. The behavior is correct. But the button is below the form
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button>
</div>
</form>
×
How about hide() after slideUp()?
$('.top-general-alert').slideUp('fast').hide('fast');
EDIT: form buttons cause page reload. Add type=button or type=reset will do work.
Full example below:
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast').hide('fast');
});
}
});
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button type="reset" class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I am trying to build a form and do some validation using JS. On success I want to redirect it to some other page in the same directory. While running window.location.href over console it is working...but while submitting form, it is not working.
Can someone please help me in this.
My code is:
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
width: 400px;
align-self: center;
}
span.psw {
padding-top: 16px;
}
</style>
<title>Login Page</title>
</head>
<body style="text-align: center;">
<h2 style="text-align: center;">The Mega Cart</h2>
<form name=loginForm onsubmit="login()" style="display: inline-block;">
<div class="container" style="text-align: center;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
<span class="psw">New user Sign up here. Sign Up</span>
</div>
</form>
</body>
<script>
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href="main.html";
return false;
}
</script>
</html>
I have already checked that this login function is called.
When you click on the form submit button it call the function login in javascript. In which you have write down the code to redirect the page.
You forgot to prevent the form to submit and that is why you are redirecting to the same page with filled-up values.
If you want to submit your form to specific URL then you should add the action attribute to the form like below.
<form name=loginForm action="URL on which you want to submit form" onsubmit="login()" style="display: inline-block;">
If you want to redirect from the login() function then you should pass the event as an argument from the form and then prevent form submission from the login() function. Please check the below code.
In your form: <form name=loginForm onsubmit="login(event)" style="display: inline-block;">
Change Login function:
function login(e) {
e.preventDefault();
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href="main.html";
}
NOTE! Don't forget to pass event in login function
Try this:
window.location.replace('main.html');
In onsubmit function, you can't redirect the page
First, In your form tag, add an action attribute
<form name=loginForm onsubmit="login()" action="main.html" style="display: inline-block;">
Second, Fixed your login function
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
return false;
}
Check the redirect URL that contains your data
Try This:
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
width: 400px;
align-self: center;
}
span.psw {
padding-top: 16px;
}
</style>
<title>Login Page</title>
</head>
<body style="text-align: center;">
<h2 style="text-align: center;">The Mega Cart</h2>
<form name=loginForm onsubmit="login()" style="display: inline-block;">
<div class="container" style="text-align: center;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="button" onclick="login()">Login</button>
</div>
<span class="psw">New user Sign up here. Sign Up</span>
</div>
</form>
</body>
<script>
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href = "https://minisoft.com.bd/";
return false;
}
</script>
</html>
I'm trying to establish a smooth transition when toggling a div. Right now the toggle is immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
I've tried to add .animate() and .fadeIn() but neither are working. Is my syntax wrong? Is the way I'm calling them wrong? Transition is still immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle()
$(".form-div-top").animate({
duration: 200
});
$(".form-div-top").fadeIn( "slow", function() {
// Animation complete
});
})
});
jQuery's toggle method accepts a duration in milliseconds as the first argument.
$(".form-div-top").toggle(300);
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle(300);
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
On my own I can suggest a solution using the toggleClass() method:
...
$(".form-div-top").toggleClass("form-div-top_show");
...
It is necessary to create an additional class for the block activity:
.form-div-top_show {
opacity: 1;
}
And also, you need to add a transition rule for the smooth appearance of the block, and replace display: none with opacity: 0:
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggleClass("form-div-top_show");
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
.form-div-top_show {
opacity: 1;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>
You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.
You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>
Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>
you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)
I have been trying to get this to work for a while now. I cannot connect the login function to the form.
I have tried onsubmit on both the form tag and the button input tag, i have tried onclick but it does not get the code from js function.
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--<link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="util.js"></script>
<script src="JavaScript.js"></script>
<script type="text/javascript"></script>
<style>
#container {
width: 1200px;
}
#map {
width: 80%;
min-height: 600px;
/*float: right;*/
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#img {
width: 150px;
height: 150px;
float: left;
margin-top: auto;
}
/*sökruta*/
#searchBox {
background-color: #ffffff;
padding: 5px;
font-family: 'Roboto','sans-serif';
margin-bottom: 10px;
float: top;
}
/*
html, body {
height: 100%;
margin: 0;
padding: 0;
}
*/
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.form-group {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body id="container">
<img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/>
<div class="row">
<br>
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label id="Search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="searchField" placeholder="Sök">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in" onclick="login()">
</form>
</div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&callback=initMap">
</script>
</div>
</body>
JavaScript.js
function login() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
}
I have created working JSFiddle - Please Check : https://jsfiddle.net/5w6fg52m/1/
Below Code working fine :
<script>
//just change function name as it's conflict with button id
function login1() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
return false;
}
</script>
//HTML
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="button" id="login" value="Logga in" onclick="return login1();">
</form>
</div>
-> I have created other version of JSFiddle, so you come to know conflict issue easily: https://jsfiddle.net/5w6fg52m/2/
Here i have keep function name same(login) and change ID of submit button.
You can set the submit event directly to your like
document.getElementById("loginForm").onsubmit = function() { ... };
Bellow a sample snippet :
window.onload = function(){
document.getElementById("loginForm").onsubmit = function() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if (username === "admin" &&
password === "123") {
alert("validation succeeded");
//location.href = "adminView.php";
} else {
alert("validation failed");
//location.href = "index1.html";
}
// to prevent submit
return false;
}
}
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in">
</form>
</div>
This happens when you declare variable or function with the same name as declare before. just rename login function or rename id="login".
if(jQuery('.required_content').length){
jQuery('.second_indiv_step_wrap').animate({scrollTop:jQuery('.required_content').first().offset().top - 96}, 'fast');
}
Here is my fiddle
How you see I have a form and with js I am doign its validation, it is ok, my issue is connected with scrolling to the first error message every time when we will have empty input field. But seems code isn't working at all.
As per your code in jsFiddle, You have used lot of in-line styles.
Also you don't have to write if condition for each field.
So I have Cleaned up the code.
And this works for me.
<!doctype html>
<html lang="en">
<head>
<title>Form</title>
<style type="text/css">
.second_indiv_step_wrap {
margin: 20px;
}
.second_indiv_step_wrap > div {
margin:20px 0 0 0;
}
label {
display:block;
}
input {
display:block;
width:250px;
}
textarea {
display:block;
width:250px;
resize:none;
height:200px;
}
.next_second {
margin-top:20px;
padding: 10px 15px;
cursor:pointer;
display:inline-block;
}
.required-field {
border: 1px solid rgb(11, 75, 132);
min-height: 52px;
font-size: 18px;
text-align: center;
color: rgb(102, 102, 102);
background: rgb(255, 255, 255);
}
.required_content, .error_x_white {
display:none;
color:rgb(244, 73, 68);
}
.show {
display:block;
}
.error {
border:0 none;
background: rgb(244, 73, 68);
}
</style>
</head>
<body>
<div class="second_indiv_step_wrap">
<div class="surname">
<span class="required_content">Required</span>
<div class="fieldWrap placeholder-hide">
<label for="surname">Surname</label>
<input type="text" name="Surname" id="surname" class="required-field">
</div>
<span class="error_x_white">Please enter surname.</span>
</div>
<div class="firstname">
<span class="required_content">Required</span>
<div class="fieldWrap placeholder-hide">
<label for="firstname">First Name</label>
<input type="text" name="FirstName" id="firstname" class="required-field">
</div>
<span class="error_x_white">Please enter first name.</span>
</div>
<div class="country_citizenship">
<span class="required_content">Required</span>
<div class="fieldWrap placeholder-hide">
<label for="autocomplete">Country</label>
<input type="text" name="autocomplete" id="autocomplete" autocomplete="off" class="ui-autocomplete-input required-field">
</div>
<span class="error_x_white">Please enter your country.</span>
</div>
<div class="residental_address">
<span class="required_content">Required</span>
<div class="fieldWrap">
<label for="pinrestextarea">Address</label>
<textarea id="pinrestextarea" name="Principal residential address" class="required-field"></textarea>
</div>
<span class="error_x_white">Please enter your address.</span>
</div>
<button class="next_second">Submit this form</button>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('.next_second').on('click', function () {
$('.required-field').each(function () {
if ($(this).val() == '') {
$(this).addClass('error');
$(this).parent().parent().find('.required_content').addClass('show');
$(this).parent().parent().find('.error_x_white').addClass('show');
} else {
$(this).removeClass('error');
$(this).parent().parent().find('.required_content').removeClass('show');
$(this).parent().parent().find('.error_x_white').removeClass('show');
}
});
setTimeout(function () {
$('.second_indiv_step_wrap .error').first().focus();
$('.error').unbind('keypress');
$('.error').bind('keypress', function(){
$(this).removeClass('error');
});
}, 100);
});
</script>
</body>
</html>