We Keep Coding

Validate multiple forms in sequence with jquery

I am trying to validate various forms in steps. I have 3 forms. I am able to get the first form to show and the rest to hide. When I click on "next" to show next form, the first form disappears, but the next form will not show up. Please advice what I am doing wrong. Here is my code
HTML
<!-- Progress Bar -->
<ul id="progressBar">
<li class="active">Account Basics</li>
<li>Account Details</li>
<li>Final Steps</li>
</ul>
<!-- <form class="form-horizontal" method="post" name="clientRegistration" action="" id="clientRegistration" data-validation="server" data-validation-url="processUser.php">-->
<form class="form-horizontal clientRegistration" method="post" action="" id="clientRegistration_AccountBasics" >
<fieldset>
<!-- Form Name -->
<h2 class="fs-subtitle">Account Basics</h2>
<legend>Client Registration</legend>
<!-- firstName -->
<p>
<label class="col-md-4 control-label" for="firstName">First Name</label>
<input id="firstName" name="firstName" type="text" data-validation-regexp="^[a-zA-Z]+(([. -][a-zA-Z ])?[a-zA-Z]*)*$" placeholder="First Name" class="form-control input-md rounded" required value="<?php (isset($_POST['firstName'])) ? $_POST['firstName'] : "" ;
?>">
</p>
<div id="fName-err-diag"></div>
<!-- lastName -->
<p>
<label class="col-md-4 control-label" for="lastName">Last Name</label>
<input id="lastName" name="lastName" type="text" data-validation-regexp="^[a-zA-Z]+(([. -][a-zA-Z ])?[a-zA-Z]*)*$" placeholder="Last Name" class="form-control input-md rounded" required value="<?php (!empty($_POST['lastName'])) ? $_POST['lastName'] : "" ;
?>">
</p>
<!-- company -->
<p>
<label class="col-md-4 control-label" for="company">Company</label>
<input id="company" name="company" type="text" data-validation-regexp="^[ A-Za-z0-9_.-]*$" placeholder="Company" class="form-control input-md rounded" value="<?php (!empty($_POST['company'])) ? $_POST['company'] : "" ;
?>">
</p>
<!-- email -->
<p>
<label class="col-md-4 control-label" for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Email" class="form-control rounded" required value="<?php (!empty($_POST['email'])) ? $_POST['email'] : "" ; ?>">
</p>
<!-- phoneNumber -->
<p>
<label class="col-md-4 control-label" for="phoneNumber">Phone Number</label>
<input id="phoneNumber" name="phoneNumber" type="text" data-validation-regexp="^[0-9]{3}\.?[0-9]{3}\.?[0-9]{4}$" placeholder="###-###-####" class="form-control input-md rounded" required value="<?php (!empty($_POST['phoneNumber'])) ? $_POST['phoneNumber'] : "" ;
?>">
</p>
<p style="text-align: width: 90%" align="center">
<br/>
</p>
<!-- password1 -->
<p>
<label class="col-md-4 control-label" for="data-validation">Password</label>
<input name="userPass" id="userPass" type="password" placeholder="password" class="form-control input-md rounded" required>
</p>
<!-- password2 -->
<p>
<label class="col-md-4 control-label" for="password">Re-Enter Password</label>
<input name="userPassConfirmation" id="userPassConfirmation" type="password" placeholder="confirm password" class="form-control input-md rounded" required>
</p>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset></form>
<form class="form-horizontal clientRegistration" method="post" action="" id="clientRegistration_AccountDetails" >
<fieldset>
<h2> Account Details</h2>
<legend>Client Registration</legend>
<!-- City -->
<p>
<label class="col-md-4 control-label" for="data-validation">City</label>
<input name="city" id="city" type="text" placeholder="city" class="form-control input-md rounded" required>
</p>
<!-- State -->
<p>
<label class="col-md-4 control-label" for="data-validation">State</label>
<input name="state" id="state" type="text" placeholder="state" class="form-control input-md rounded" required>
</p>
<!-- Zip Code -->
<p>
<label class="col-md-4 control-label" for="data-validation">Zip Code</label>
<input name="zipCode" id="zipCode" type="text" placeholder="zipCode" class="form-control input-md rounded" required>
</p>
<!-- Referrals -->
<p>
<label class="col-md-4 control-label" for="data-validation">How did you hear about us?</label>
<input name="referral" id="referral" type="text" placeholder="referral" class="form-control input-md rounded" required>
</p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset></form>
<form class="form-horizontal clientRegistration" method="post" action="" id="clientRegistration_FinalSteps" >
<fieldset>
<h2>Final Steps</h2>
<legend>Client Registration</legend>
<!-- CC info -->
<p>
CC info goes here
</p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<!-- Submit Button -->
<div class="input-button">
<!-- <input type="submit" class="roundedSubmit" name="Submit" id="Submit" value="Submit">-->
<input type="submit" class="action-button" name="Submit" id="Submit" value="Submit">
</div>
</fieldset></form>
CSS
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
/*background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));*/
}
body {
/* font-family: montserrat, arial, verdana; */
}
/*form styles*/
form {
width: 100%;
margin: 10px auto;
text-align: left;
position: relative;
}
form {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first form*/
form:not(:first-of-type) {
display: none;
}
/*inputs*/
input[type="text"], textarea {
padding: 15px;
/*background-color: #1779ba;*/
border: 1px solid #ccc;
/*border-radius: 3px;*/
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
/*font-size: 13px;*/
}
/*buttons*/
input.action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
form.clientRegistration .action-button:hover, form.clientRegistration .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*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: 33.33%;
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: #27AE60;
color: white;
}
Javascript w/ jquery
<script src="js/jquery.struct.3.4.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script><!-- UI Effects on Form -->
<script type="text/javascript">
// Show form in steps
//jQuery time
var current_fs, next_fs, previous_fs; //fieldset
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
/*validate form*/
//$.fn.validateForm();
if(animating) return false;
animating = true;
current_fs = $(this).parent();
console.dir(current_fs);
next_fs = $(this).parent().next();
next_fs.show();
//activate next step on progressbar using the index of next_fs
//$("#progressbar li").eq($("form").index(next_fs)).addClass("active");
//show the next form
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'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("form").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_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 previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
Thought it would help to provide url of what I am trying to emulate, I changed the code from 1 form and 3 legends to 3 forms each with their own legend.
jsfiddle url: jsfiddle url of what I want to achieve
Any and all help would be appreciated. Thanks.

Try to point out the issue with your question from comment but I guess there is not enough space to summarize it.
What you intended to do is considered as a bad practice and abuse the usage of form. Each form generally has its own submit button and holds its own task (or business logic) so data can be sent to server for processing once you hit the submit button. And you would expect refresh and redirect your page to somewhere else upon submission. That's why we always want to have one form for each page and prevent duplicated submission.
If you noticed the url provides, data from all 3 panels are contained in just one account-create form. All data will be sent to server and validated at one time. There are many buttons but button types are different. If something is broken during the process, user can always restart from the beginning.
In short, form -> server.
If you separated them to three forms (even put each form into its own page), it's messy with a lot of security hole.
form1->server (pass the validation, account is created) , form2 somehow failed due to any reasons(internet issues,etc). Now users has trouble to go back to step1 because
the account is created, whether you have to create another block to solve this messy completely. Not to mention you are trying to put three forms with same intention within one page, it's unsalvageable on your case.

How to add next previous buttons on the popup?

I tried to add the next button on the popup box. Now it is run popups in a specific order. Also, when the final popup open, the button disable automatically. but there is an issue. when I delete some modal, the code is not working. I want to run popups in that order and when I delete some popup, the popups want to run correctly. Also, I want to create the previous button. how can I do it? please help me to fix the issue.
Here is the code I used.
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal++)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment2").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal--)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment2").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
https://jsfiddle.net/Sanjeewani/q1tm8ck2/38/

I'm not exactly sure if this is what you want. But i tried rewriting your js a bit.
$(document).ready(function() {
var data=[];
currentModal = 0;
$('.modalDialog').each(function(){
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function(){
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#'+data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
//prev
$('.getAssignment2').click(function(){
if (currentModal>0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
//next
$('.getAssignment').click(function(){
if (currentModal<data.length - 1) {
currentModal++;
if (currentModal===data.length - 1) $('#'+data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment{
cursor:pointer;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder=3>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 3</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</body>

How to code the validation in javascript

I'm very new to Javascript. I have done one template for login, It is working like a charm. Here My question is how to set up the validation and navigation like if(username==root && password==root) then it should redirect into other page. I just post my code. I didn't include the css code. Then i did this code in html in that i have try to write the javascript but i don't know how to handle this.
My code:
<!DOCTYPE html>
<html>
<style>
/* Full-width input fields */
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;
}
/* Set a style for all buttons */
button {
background-color: #0077B5;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 10px 0 5px 0;
position: relative;
}
img.cisco{
width: 30%;
border-radius: 30%;
}
.container {
padding: 10px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
/*overflow: auto; Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 5px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 200px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
.Center {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
<body>
<h2><text-align:center>Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" method="post" name="myform">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/cisco1.png" alt="Cisco" class="cisco">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" id="username" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" id="password" placeholder="Enter Password" name="psw" required>
<button type="submit" id="login" onclick="validate()">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
var attempt = 3; //Variable to count number of attempts
//Below function Executes on click of login button
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "root" && password == "root"){
alert ("Login successfully");
console.log("Redirecting to welcome page...")
window.location = "success_new.html"; //redirecting to other page
return false;
}
else{
attempt --;//Decrementing by one
alert("You have left "+attempt+" attempt;");
}
//Disabling fields after 3 attempts
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>

At last I fix it. The issue here was "return" function on the onclick listener. here is that one
add return before the validate function
<button type="submit" id="login" onclick=" return validate()">Login</button>
Then it's works fine.

var username = document.getElementById('uname');
var pwd = document.getElementById('psw');
document.getElementById("b").onclick = function(){
if(username.value == "root" && pwd.value == "root"){
console.log("Redirecting to welcome page...")
window.location = "welcome.html";
}
}
<h2 text-align:"center">Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block';">Login</button>
<div id="id01" class="modal" style="display:none;">
<form class="modal-content animate" action="">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/logo1.png" alt="Logo" class="logo1">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button type="button" id="b">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Fixed it. If I were you, I'd go over these and look at each difference to see what went wrong. It should be noted that you shouldn't do client-side validation like this, because anyone can easily:
See the password and username
Go to the url directly
Etc.
You really should do this server-side.

Toggle Slide right and left element group Javascript

i tried to creat a little header navigation for the search, language and contact option. (demo below)
All the Elements are clickable. I cant manage that the content slides in, moves the other icons and slides back when any other element is clicked.
PS: The searchbar is already working in my jquery, jquery ui document with sliding in and back (doesn't work on JSFiddle dont know why.., but p tags dont slide in. The search bar is working with a code like this:
$(function () {
$(".lupeIcon").click(function (){
$(".searchField").addClass("searchFieldWidthExtender",2000)
$(".telefonField").hide("slide", {direction: "right"}, 2000);
$(".globusField").hide("slide", {direction: "right"}, 2000);
});
});
)
Here is the code
HTML:
<body>
<nav>
<div class="navIcon telefonIcon"><p class="telefonField">12 346 5</p><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="navIcon lupeIcon"><input class="searchField" type="text" name="search"><i class="fa fa-search" aria-hidden="true"></i></div>
<div class="navIcon globusIcon"><p class="globusField">DE | EN</p><i class="fa fa-globe" aria-hidden="true"></i></div>
</nav>
</body>
CSS:
div.navIcon{
float: left;
margin: 0 40px 0 0;
line-height: 95px;
padding: 0;
font-size: 20px;
color: red;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
display: -webkit-box;
}
.searchField {
display: none;
height: 30px;
margin: 0 10px 0 0;
border: none;
border-radius: 30px;
box-shadow: inset 0 0 2px red;
}
.telefonField, .globusField {
display: none;
height: 30px;
margin: 0 10px 0 30px;
vertical-align: middle;
}
Javascript:
$(".telefonIcon").click(function (){
$(".telefonField").addClass("displayInliner",2000)
$(".telefonField").show("slide", {direction: "right"}, 2250);
$(".searchField").hide();
$(".globusField").hide("slide", {direction: "right"}, 2000);
});
$(".lupeIcon").click(function (){
$(".searchField").addClass("searchFieldWidthExtender",2000)
$(".searchField").show("slide", {direction: "right"}, 2250);
$(".telefonField").hide("slide", {direction: "right"}, 2000);
<!-- $(".globusField").hide("slide", {direction: "right"}, 2000); -->
$(".globusField").hide();
});
$(".globusIcon").click(function (){
$(".globusField").addClass("displayInliner",2000)
$(".globusField").show("slide", {direction: "right"}, 2250);
$(".telefonField").hide("slide", {direction: "right"}, 2000);
$(".searchField").hide("slide", {direction: "right"}, 2000);
});
Demo with Icons

I worked on your contact menu animation.
I had fun with it.
I did it because I think that the effect you want is great...
You will notice that I changed your code a lot.
I don't really know how to explain all the changes one by one, so feel free to ask.
Have a look at my CodePen.
HTML
<body>
<nav>
<div class="field telefonField">12 346 5</div>
<div class="navIcon telefonIcon">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="field searchField">
<input type="text" name="search">
</div>
<div class="navIcon lupeIcon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="field globusField">DE | EN</div>
<div class="navIcon globusIcon">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
</nav>
</body>
CSS
div.navIcon {
float: left;
line-height: 95px;
padding: 0;
font-size: 20px;
color: red;
}
.fa{
float: left;
line-height: 95px;
color: red;
padding: 0 6px;
}
.telefonField,
.searchField,
.globusField {
float:left;
display:none;
width: 0;
margin: 0;
color: red;
white-space:nowrap;
overflow:hidden;
line-height: 95px;
}
.searchField input{
border: none;
width:0px;
border-radius: 30px;
box-shadow: inset 0 0 2px red;
outline: none;
padding: 0.3em 0.5em 0.1em 0.7em;
}
jQuery
var showDelay = 2000;
var hideDelay = 2000; // If you want to set a different hide delay
var thisWidth = 0; // Element width are different
var searchField = false; // For the input exception
$(".navIcon").click(function(){
// Execute script only if «this» is not already displayed
if( $(this).prev(".field").css("width") == "0px" ){
if( $(this).prev(".field").hasClass("telefonField") ){
thisWidth = "63px";
searchField = false;
}
if( $(this).prev(".field").hasClass("searchField") ){
thisWidth = "248px";
searchField = true;
}
if( $(this).prev(".field").hasClass("globusField") ){
thisWidth = "59px";
searchField = false;
}
// Show it!
$(this).prev(".field").animate({width:thisWidth},showDelay).show();
// Hide the others
$(".field").not( $(this).prev(".field") ).animate({width:"0px"},hideDelay,function(){
$(this).hide();
});
// Also animated the input width...
if(searchField){
$(".searchField input").show().animate({width:"225px"},showDelay);
}
}
});

How to show all the applicable error messages on top of a form instead of showing the error messages one by one?

I'm having a multi-step form functionality. Following is the code for it. I tried to create a jsFiddle for this code but it was not saving there in fiddle and I was not able to create it.
If you just make a HTML file on your system and copy paste the whole code it will run in any browser without making any change.
<!doctype HTML>
<html>
<head>
<style>
/*custom font*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
background: rgba(0,0,0,0.3) url('bg.jpg');
background-color: rgba(0,0,0,0.3);
}
body {
font-family: montserrat, arial, verdana;
}
#mhead {
font-family: Georgia !important;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
text-align: center;
font-family: georgia;
position: fixed;
top: 0px;
width: 100%;
padding: 20px;
}
/*form styles*/
#msform {
width: 400px;
margin: 110px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: rgb(0,0,0);
text-transform: uppercase;
font-size: 11px;
width: 33.33%;
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: #27AE60;
color: white;
}
.red{
color: red;
}
.success{
color:green;
}
#message{
padding-top: 200px;
position: relative;
text-align: center;
}
</style>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
jQuery('#sucess').hide();
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
$(".next").click(function(event) {
var fv=formValidation(event);
if(fv) {
} else {
return false;
}
if(animating) return false;
animating = true;
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+')'});
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'
});
});
$(".previous").click(function() {
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_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 previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$("#msform").submit(function() {
var fname=jQuery('#fname').val();
if ($.trim(fname).length == 0) {
document.getElementById("fname").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter First Name !</span>');
jQuery('.fs-error').show();
return false;
} else {
jQuery('.fs-error').hide();
var serializedReturn = formData();
window.location = "http://localhost/multistepform/success.php";
return false;
}
});
});
function formData() {
var serializedValues = jQuery("#msform").serialize();
var form_data = {
action: 'ajax_data',
type: 'post',
data: serializedValues,
};
jQuery.post('insert.php', form_data, function(response) {
alert(response);
// document.getElementById("sucess").style.color = "#006600";
// jQuery('#sucess').show();
});
return serializedValues;
}
function formValidation(e) {
var emailval=jQuery('#email').val();
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
// Checking Empty Fields
var vemail=mailformat.test(emailval)
if ($.trim(emailval).length == 0 || vemail==false) {
jQuery('.fs-error').html('<span style="color:red;"> Email is invalid !</span>');
return false;
} else {
jQuery('.fs-error').hide();
}
var f_name = document.getElementById("f_name").value;
if (f_name == '') {
document.getElementById("f_name").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please enter First Name !</span>');
jQuery('.fs-error').show();
return false
} else {
document.getElementById("f_name").style.borderColor = "#006600";
document.getElementById("l_name").style.borderColor = "#006600";
jQuery('.fs-error').hide();
}
var l_name = document.getElementById("l_name").value;
if (l_name == '') {
document.getElementById("l_name").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please enter Last Name !</span>');
jQuery('.fs-error').show();
return false
} else {
document.getElementById("l_name").style.borderColor = "#006600";
jQuery('.fs-error').hide();
return true;
}
}
</script>
</head>
<body>
<div id="mhead"><h2>Multi Step Form with Progress Bar using jQuery, CSS3 and PHP - <span class="red">Info</span>Tuts</h2></div>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<div class="fs-error"></div>
<input type="text" name="email" id="email" placeholder="Email" />
<input type="text" name="f_name" id="f_name" placeholder="First Name" />
<input type="text" name="l_name" id="l_name" placeholder="Last Name" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<div class="fs-error"></div>
<input type="text" name="fname" id="fname" placeholder="First Name" />
<input type="text" name="lname" id="lname" placeholder="Last Name" />
<input type="text" name="phone" id="phone" placeholder="Phone" />
<textarea name="address" id="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
</body>
</html>
Currently error messages are shown one by one when user clicks on "Next" button, but I want to show all the three error messages together when user doesn't enter any data into the fields viz. Email, First Name and Last Name. Currently I'm able to show the error messages one by one. I don't want to do that any more, I want to show all the applicable error messages together when user clicks on "Next" button.
How should I do this? Please help me.
Once again apologies for not able to create a js fiddle.
Thanks.

You have two options:
1) You collect all of the error messages to a variable, by appending:
rrrorText .= '<span class="stylish">we have toruble!</span>'
And output it prior to form.
2) You make an empty div:
<div id="poo"></div>
And add errors to it with something like javascript:
document.getElementById('poo').innerHTML .= 'we have another problem!';