formToWizard example #2

by artoodetoo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
    <section id="controls">
        <h1>Controls: </h1>
        <input id="txt_stepNo" type="text" placeholder="Enter Step No..." />
        <button id="btn_next">Next [External]</button>
        <button id="btn_prev">Previous [External]</button>
    </section>

    <form id="SignupForm" action="">
        <fieldset>
            <legend>Account information</legend>
            <label for="Name">Name</label>
            <input id="Name" type="text" class="validate[required]" />
            <label for="Email">Email</label>
            <input id="Email" type="text" class="validate[custom[email],required]" />
            <label for="Password">Password</label>
            <input id="Password" type="password" />
        </fieldset>
        <fieldset>
            <legend>Company information</legend>
            <label for="CompanyName">Company Name</label>
            <input id="CompanyName" type="text" class="validate[required]" />
            <label for="Website">Website</label>
            <input id="Website" type="text" />
            <label for="CompanyEmail">CompanyEmail</label>
            <input id="CompanyEmail" type="text" />
        </fieldset>
        <fieldset>
            <legend>Billing information</legend>
            <label for="NameOnCard">Name on Card</label>
            <input id="NameOnCard" type="text" />
            <label for="CardNumber">Card Number</label>
           ...

CSS

body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}
#header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
fieldset { border:none; width:320px;}
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
label { display:block; margin:15px 0 5px;}
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}

button, .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}
button:hover, .prev:hover, .next:hover { background-color:#000; text-decoration:none;}
button { border: none; }
#controls { background: #eee; box-shadow: 0 0 16px #999; height: 30px; position: fixed; padding: 10px; top: 0; left: 0; width: 100%; z-index: 1 }
#controls h1 { color: #666; display: inline-block; margin: 0 0 8px 0 }
#controls input[type=text] { border-color: #999; margin: 0 25px; width: 120px }

#steps { margin: 80px 0 0 0 }
.prev{float:left}
.next{float:right}
.steps{list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
.steps li{color:#b0b1b3;font-size:24px;float:left;padding:10px;transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s}
.steps li span{font-size:11px;display:block}
.steps li.current{color:#000}
.breadcrumb{height:37px}
.breadcrumb li{background:#eee;font-size:14px}
.breadcrumb li.current:after{border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:6px solid #666;content:' ';position:absolute;top:0;right:-6px}
.breadcrumb li.current{background:#666;color:#eee;position:relative}
.breadcrumb li:last-child:after{border:none}

JavaScript

$( function() {
            var $signupForm = $( '#SignupForm' );
            
            $signupForm.validationEngine();
            
            $signupForm.formToWizard({
                submitButton: 'SaveAccount',
                showProgress: true, //default value for showProgress is also true
                nextBtnName: 'Forward >>',
                prevBtnName: '<< Previous',
                showStepNo: false,
                validateBeforeNext: function() {
                    return $signupForm.validationEngine( 'validate' );
                }
            });
            
            
            $( '#txt_stepNo' ).change( function() {
                $signupForm.formToWizard( 'GotoStep', $( this ).val() );
            });
            
            $( '#btn_next' ).click( function() {
                $signupForm.formToWizard( 'NextStep' );
            });
            
            $( '#btn_prev' ).click( function() {
                $signupForm.formToWizard( 'PreviousStep' );
            });
        });