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

Posted 2:07 pm by muni & 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.

Demo

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.

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..