Validate multiple forms in sequence with jquery

Question

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.

Answer 1

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.