Multipart form using jQuery w/ validation and accordion plugins.
Thanks to Jörn at http://bassistance.de/

This demo uses validation, accordion panels and masked inputs. There is also custom js code (non-jquery) to remove non-numeric characters , and events assigned to the step 2 elements that will set the same values on the matching fields in step 3.

The accordion script uses the jQuery 'dimensions' plugin to get the height of each of the form sections, then draws the outlying container to accomodate the largest panel. Notice how the first panel has lots of blank space beneath, but the third panel has none. (This would presumably be controllable by limiting the amount of content you put in each panel.)

You can view the source to see the inline events and classes on each of the form elements (code is a bit messy, this is a quickly-stripped version of a live page - but the validation rules and classes are obvious).
Scroll down to see the jquery and css code at play.

Note: at the time of creation, the version of accordion in use had issues with some versions of Safari. The simple fix was an alternate show-hide behavior if the browser is Safari (jQuery makes browser sniffing a snap).

See the demo

See the code

Help me Buy and Sell a House

This form is quick & easy to complete - in only 3 steps!

Step 1 of 3
*Required Field

Tell us about the property you're buying
Are you currently working with a
real estate agent? No: Yes:

When would you like to move?
Purchase price range:
State:
Desired property type:
Step 2 of 3
*Required Field

Tell us about the property you're selling
When would you like to sell?
Type of property you are selling:
Property Street Address:
Address (2):
City:
State:
Zip:
Estimated Market Value:
Bedrooms:
Bathrooms:
Approx. Age of Home:
Approx. Square Footage:
Step 3 of 3
*Required Field

Tell us about yourself
First Name:
Last Name:
Current Address:
Address (2):
City:
State:
Zip:
Phone Number:
Alternate Number:
Email Address:
Confirm Email:

This is a sample form, no information is sent anywhere.
(If you really want to send me your info, write it on a crisp $50 bill and mail it to... )

Jquery / Javascript Code

<script type="text/javascript">

</script>

// IF SAFARI
if($.browser.safari) { 
// this alert shows safari detection
//$( function() { alert("this is safari!"); } ); 
// hide panels 2&3
$('#sf2').hide();
$('#sf3').hide();
var current = 0;
var v = $("#cmaForm").validate({
  subformRequired: function(element) {
return !( current == 0 && element.parents("#sf1").length || current == 1 && element.parents("#sf2").length || current == 2 && element.parents("#sf3").length );
  },
  errorClass: "warning",
	errorElement: "label",
	onkeyup:false,
	onblur:false
});
// back buttons do not need to run validation
$("#sf2 .prevbutton").click(function(){
//accordion.activate(0);
current = 0;
$('#sf2').slideUp();
$('#sf1').slideDown();
}); 
$("#sf3 .prevbutton").click(function(){
//accordion.activate(1);
$('#sf3').slideUp();
$('#sf2').slideDown();
current = 1;
}); 
// these buttons all run the validation, overridden by specific targets above
$(".open2").click(function() {
  if (v.form()) {
$('#sf2').slideUp();
$('#sf3').slideDown();
//    accordion.activate (2);
    current = 2;
  }
});
$(".open1").click(function() {
  if (v.form()) {
$('#sf1').slideUp();
$('#sf2').slideDown();
//    accordion.activate (1);
    current = 1;
  }
});
$(".open0").click(function() {
  if (v.form()) {
$('#sf2').slideUp();
$('#sf1').slideDown();
//    accordion.activate (0);
    current = 0;
  }
});
// IF NOT SAFARI
}
else 
{  
// accordion functions
 var accordion =$("#stepForm").accordion({
    autoheight: true 
}); 
var current = 0;
var v = $("#cmaForm").validate({
  subformRequired: function(element) {
return !( current == 0 && element.parents("#sf1").length || current == 1 && element.parents("#sf2").length || current == 2 && element.parents("#sf3").length );
  },
  errorClass: "warning",
	errorElement: "label",
	onkeyup:false,
	onblur:false
});
// back buttons do not need to run validation
$("#sf2 .prevbutton").click(function(){
accordion.activate(0);
current = 0;
}); 
$("#sf3 .prevbutton").click(function(){
accordion.activate(1);
current = 1;
}); 
// these buttons all run the validation, overridden by specific targets above
$(".open2").click(function() {
  if (v.form()) {
    accordion.activate (2);
    current = 2;
  }
});
$(".open1").click(function() {
  if (v.form()) {
    accordion.activate (1);
    current = 1;
  }
});
$(".open0").click(function() {
  if (v.form()) {
    accordion.activate (0);
    current = 0;
  }
});

//end safari IF
 }
 
// masked inputs
 $(function($){
         $("#recordClientPhone").mask("(999) 999-9999");
         $("#recordClientPhoneAlt").mask("(999) 999-9999");
         $("#recordClientZip").mask("99999");
         $("#recordPropertyZip").mask("99999");	
         $("#recordPurchaseZip").mask("99999");	
      });
});
</script>

CSS Styles

<style type="text/css">
/* ------ one ------------*/
body .mainText{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#demoText h1, .mainText h1{
font-size:130%;
color:#0099FF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
margin:5px 4px 5px 24px;
background:none;
padding:0;
border:none;
text-transform:capitalize;
}
.mainText h2{
font-size:110%;
color:#000033;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
background:none;
margin:4px 32px 6px 22px;
text-transform:capitalize;
}
.mainText h3{
font-size:120%;
font-weight:900;
margin:14px 0 0 0;
text-align:center;
color:#000033;
}
.mainText table{
width:95%;
border:1px solid #0099FF;
border-collapse:collapse;
margin:18px 7px;
}
.mainText table td{
background-color:#99CCFF;
color:#000033;
padding:4px;
}
.mainText table th{
background-color:#000033;
color:#99CCFF;
padding:4px;
}
.mainText .linkPar a{
color:#000033;
text-decoration:underline;
}
.mainText .linkPar a:hover{
color:#660033;
text-decoration:none;
font-weight:900;
}
.pusher{
cursor:pointer;
padding:3px 10px 3px 22px;
font-weight:900;
font-size:14px;
}
/* ------------- form specific styles are here  -------------- */

fieldset {
margin:0;
border:1px solid #C3DE00;
padding: 10px;
/*border:none;
padding:0;*/
color:#7563A5;
}
legend {
background-color:#FFFFFF;
text-align: center;
color: #097981;
padding:0 12px;
}
label {
text-align: right;
width: 298px;
border-right: 1px dotted #099;
padding-right: 5px;
margin:0 0 8px 0;
float: left;
clear: left;
display: block;
color: #7563A5;
}
label.checkbox, label.textarea{
border:none;
}
label.lgfield{
border:none;
text-align:center;
clear:both;
float:none;
width:100%;
}
fieldset input, fieldset select, fieldset textarea {
margin-left: 10px;
margin-bottom: 8px;
}
select.longfield{
margin:0 0 0 115px;
}
input[type="radio"],input[type="checkbox"] {
margin: 2px 0 0 4px;
}
textarea {
width:250px;
float:left;
}

/*Get Help Form Styles*/
p.formDisclaimer{
text-align:center;
margin:32px 24px 12px 0;
font-style:italic;
}
div.buttonWrapper{
margin:28px 0 14px 0;
clear:both;
text-align:center;
}
.formspacer{
height:1em;
clear:both;
}
.hideField{
display:none;
}
.pushOpen{
height:18em;
}
/* ----- error message for field validation ----- */
#stepForm label.warning{
text-align: left;
width:auto;
padding:0;
margin:0 0 0 10px;
float: none;
clear: none;
display: inline;
color:#CC3366;
font-size:10px; 
border:none;
border-top:1px dotted #CC3366;
}
div.requiredNotice{
width:140px;
float:right;
margin:0 24px 0 0;
padding:0;
}
h3.stepHeader{
text-align:left;
font-size:16px;
font-weight:bold;
margin:0 0 24px 24px;
color:#676cac;
}
ul#stepForm, ul#stepForm li{
margin:0;
padding:0;
}
ul#stepForm li{
list-style:none;
}

/* Form Buttons  */
input.submitbutton, .nextbutton, .prevbutton{
width:100px;
height:40px;
background-color:#663399;
padding:4px;
border:1px solid #339933;
cursor:pointer;
text-align:center;
color:#FFFFFF;
margin:7px;
}
input.submitbutton{
background-color:#006699;
}
</style>

jQuery demo

jQuery accordion form with validation

Multipart form using jQuery w/ validation and accordion plugins.
Thanks to Jörn at http://bassistance.de/

Help me Buy and Sell a House

This form is quick & easy to complete - in only 3 steps!

Tell us about the property you're buying

Tell us about the property you're selling

Tell us about yourself

jQuery demo

jQuery accordion form with validation

Multipart form using jQuery w/ validation and accordion plugins. Thanks to Jörn at http://bassistance.de/

Help me Buy and Sell a House

This form is quick & easy to complete - in only 3 steps!

Tell us about the property you're buying

Tell us about the property you're selling

Tell us about yourself

Multipart form using jQuery w/ validation and accordion plugins.
Thanks to Jörn at http://bassistance.de/