Multi Stage HTML5 Form Using jQuery, Ajax and CSS3 – PART 2

Posted by & filed under CSS, HTML5, JQUERY, PHP.

This Multi Stage HTML5 Form Using jQuery and CSS3 PART 2 continuation of previous tutorial, before continuing this have a look at my previous tutorial on  Multi Stage HTML5 Form Using jQuery and CSS3.

In this tutorial we are going to see how to use jQuery validation plugin in the Multi Stage HTML5 Form Using jQuery, ajax and CSS3 based on button click event.

multi stage html5 form using jquery , ajax and css3

Demo

 

Multi Stage HTML5 Form using jQuery, ajax and css3

Multi Stage HTML5 Form using jQuery, Ajax and css3

Before continuing this tutorial please add jQuery valiadtion plugin in the index.php file.

<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script>

Next add class=’required’ only in the input elements of firstStep.

<div id="firstStep">
	<p>First Step</p>
	   <input id="first_name" name="first_name" class="login-field required" type="text" placeholder="Enter your first name" value="">
	   <br/>
	   <input id="last_name" name="last_name" class="login-field required" type="text" placeholder="Enter your last name" value="">
	    <br/>
	   <input id="email" name="email" class="login-field required" type="email" placeholder="Enter your Email" value="">
	    <br/>
	   <button type="button"  id="firstBtn" class="next1">Next</button>
	</div>

Now after every step button is clicked $(“#loginForm”).valid() will check all the required elements are filled or not. If all the fields are field then $(“#loginForm”).valid() will return true, so it goes to execute codes in the if condition.

multi stage html5 form using jquery, ajax and css3 script

Download

$("#firstBtn").click(function(){
	       if($("#loginForm").valid()){
			$("#firstStep").slideUp();
			$("#secondStep").slideDown();
		  }	
	 });

After first button clicked and validation too successful mean, then I will add dynamically class=’required’  property to each input elements in this second step using jQuery

var original=$('#phone,#street_name,#city_name').attr('class')
$('#phone,#street_name,#city_name').attr('class','required '+ original);

Add same functionality in all the four steps..

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!