Form wizard

														
<form id="contact" action="#">
	<div>
		<h3>Account</h3>
		<section>
			<label for="userName">User name *</label>
			<input id="userName" name="userName" type="text" class="form-control required">
			<label for="password">Password *</label>
			<input id="password" name="password" type="text" class="form-control required">
			<label for="confirm">Confirm Password *</label>
			<input id="confirm" name="confirm" type="text" class="form-control required">
			<p>(*) Mandatory</p>
		</section>
		<h3>Profile</h3>
		<section>
			<label for="name">First name *</label>
			<input id="name" name="name" type="text" class="form-control required">
			<label for="surname">Last name *</label>
			<input id="surname" name="surname" type="text" class="form-control required">
			<label for="email">Email *</label>
			<input id="email" name="email" type="text" class="form-control required email">
			<label for="address">Address</label>
			<input id="address" name="address" type="text" class="form-control">
			<p>(*) Mandatory</p>
		</section>
		<h3>Hints</h3>
		<section>
			<ul>
				<li>Foo</li>
				<li>Bar</li>
				<li>Foobar</li>
			</ul>
		</section>
		<h3>Finish</h3>
		<section>
			<input id="acceptTerms" name="acceptTerms" type="checkbox" class="form-control  required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
		</section>
	</div>
</form>
													

														
<!-- Form Wizard JS -->
<script src="dist/js/jquery.validate.js"></script>
<script src="vendors/jquery-steps/build/jquery.steps.min.js"></script>

/* Basic Wizard Init*/
	if($('#contact').length >0) {
		var form = $("#contact");
		form.validate({
			errorPlacement: function errorPlacement(error, element) { element.before(error); },
			rules: {
				confirm: {
					equalTo: "#password"
				}
			}
		});
		form.children("div").steps({
			headerTag: "h3",
			bodyTag: "section",
			transitionEffect: "fade",
			titleTemplate: "#title#", 
			onStepChanging: function (event, currentIndex, newIndex)
			{
				form.validate().settings.ignore = ":disabled,:hidden";
				return form.valid();
			},
			onFinishing: function (event, currentIndex)
			{
				form.validate().settings.ignore = ":disabled";
				return form.valid();
			},
			onFinished: function (event, currentIndex)
			{
				alert("Submitted!");
			}
		});
	}
													

														
<form id="contact_v" action="#">
	<div>
		<h3>Account</h3>
		<section>
			<label for="userName_1">User name *</label>
			<input id="userName_1" name="userName_1" type="text" class="form-control required">
			<label for="password_1">Password *</label>
			<input id="password_1" name="password_1" type="text" class="form-control required">
			<label for="confirm_1">Confirm Password *</label>
			<input id="confirm_1" name="confirm_1" type="text" class="form-control required">
			<p>(*) Mandatory</p>
		</section>
		<h3>Profile</h3>
		<section>
			<label for="name_1">First name *</label>
			<input id="name_1" name="name_1" type="text" class="form-control required">
			<label for="surname_1">Last name *</label>
			<input id="surname_1" name="surname_1" type="text" class="form-control required">
			<label for="email_1">Email *</label>
			<input id="email_1" name="email_1" type="text" class="form-control required email">
			<label for="address_1">Address</label>
			<input id="address_1" name="address_1" type="text" class="form-control">
			<p>(*) Mandatory</p>
		</section>
		<h3>Hints</h3>
		<section>
			<ul>
				<li>Foo</li>
				<li>Bar</li>
				<li>Foobar</li>
			</ul>
		</section>
		<h3>Finish</h3>
		<section>
			<input id="acceptTerms_1" name="acceptTerms_1" type="checkbox" class="form-control  required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
		</section>
	</div>
</form>
												

														
if($('#contact_v').length >0) {
	var form_v = $("#contact_v");
	form_v.validate({
		errorPlacement: function errorPlacement(error, element) { element.before(error); },
		rules: {
			confirm: {
				equalTo: "#password_1"
			}
		}
	});
	form_v.children("div").steps({
		headerTag: "h3",
		bodyTag: "section",
		transitionEffect: "fade",
		titleTemplate: "#title#", 
		stepsOrientation: "vertical",
		onStepChanging: function (event, currentIndex, newIndex)
		{
			form_v.validate().settings.ignore = ":disabled,:hidden";
			return form_v.valid();
		},
		onFinishing: function (event, currentIndex)
		{
			form_v.validate().settings.ignore = ":disabled";
			return form_v.valid();
		},
		onFinished: function (event, currentIndex)
		{
			alert("Submitted!");
		}
	});
}