Single form Multiple Page Validation?

Single form Multiple Page Validation?

Hi Friends,
         I am working on single form divided into multiple pages using <div id="">
I am using next and previous buttons <input type="button"> to navigate between these pages but I am unable to validate each page before moving to next page using next button

I am displaying next page form by using "element.style.display = 'none' & element.style.display = 'block' "
method.

Please help me with validation on the current page before moving to next page. Any help is appreciated. 
I am adding my code below


<!--show form using block and none using function -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>localhost\Login Module</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
//-------------------------Showing Forms ---------------------
   function collapseElem(obj){ 
   var el = document.getElementById(obj);
         el.style.display = 'none'; }
         
  function expandElem(obj){
         var el = document.getElementById(obj);
         el.style.display = 'block';}
           
   function collapseAll(){
          var numFormPages = 2;
          for(i=2; i <= numFormPages; i++){
                 currPageId = ('mainForm_' + i);
                 collapseElem(currPageId); }
         }
 
window.onload = collapseAll;
//--------------------------End Showing forms-------------------

$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
phone: {required: true, }
},
messages: {
firstname: "Please enter your firstname",
phone: "Please enter a valid phone number",
}
});
});
</script>
</head>
<body>
<form id="signupForm" class="cmxform" method="post" action="">
<div id="mainForm_1" >
<fieldset>
<legend>User informations (Step 1/2)</legend><br>
<p>
<label for="First_name">First name : </label>
<input value=""  class="validate[required,custom[noSpecialCaracters],custom[onlyLetter],length[0,100]],funcCall[validate2fields]] text-input" type="text" name="firstname" id="firstname" title="Last Name"/>
</p>
<span id="next"><input type="button" onclick=" collapseElem('mainForm_1'); expandElem('mainForm_2');" class="mainForm" value="Next" /></span> 
</fieldset>
</div>
<div id="mainForm_2">
<fieldset>
<legend>Personal Information (Step 2/2)</legend><br>
<p>
<label for="phone" class="input required">Phone Number:</label> 
<input name="phone" id="phone" class="inputclass pageRequired" maxlength="254" title="Phone Number is required" />
</p>
<p>
<label for="cell Phone" class="input required">Cell Phone Number : </label>
<input value=""   class="inputclass pageRequired" maxlength="254" title="Phone Number is required" type="text" name="c_phone"  id="c_phone" />
</p>
<p>
<input class="submit" type="submit" value="Validate & Send the form!"/>
</p>
<!-- previous page button -->
<span id="previous"><input type=button onclick="collapseElem('mainForm_2'); expandElem('mainForm_1');" value="Previous"/></span>
</fieldset>
</div>
</form>
</body>
</html>


Yograj