multipage plugin

multipages and validation

by Akram kamal

HTML

<script src="http://xoxco.com/projects/code/multipage/jquery.multipage.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<div id="form_wrapper">
<form id="multipage">

<!-- first page --> 
<fieldset id="page_one">
<p class="form_title">select a contact option</p>
<input type="radio" name="selection" id="option1" class="selection"></input>
    <label for="option1" class="selection radio"><span>option one</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo felis, dictum ut cursus et, condimentum at purus. Suspendisse vel quam quis mauris hendrerit luctus. Duis vehicula dignissim felis, vitae porttitor metus commodo id. Maecenas tempor facilisis diam eu volutpat. In nunc libero, rutrum nec pretium quis, tincidunt eu elit. </p>
     </label>
<input type="radio" name="selection" id="option2" class="selection"></input>
    <label for="option2" class="selection radio"><span>option two</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo felis, dictum ut cursus et, condimentum at purus. Suspendisse vel quam quis mauris hendrerit luctus. Duis vehicula dignissim felis, vitae porttitor metus commodo id. Maecenas tempor facilisis diam eu volutpat. In nunc libero, rutrum nec pretium quis, tincidunt eu elit. </p>
    </label>
</fieldset>

<!-- second page -->
<fieldset id="page_two">
<p class="form_title">your details</p>
<div id="field_wrapper">
<div class="control-group">
<label class="control-label" for="name" ></label>
<input name="name" id="name" value="your name" onFocus="clearText(this)" onBlur="clearText(this.className = 'onblurtext')"/>
</div>
<div class="control-group">
<label class="control-label" for="email"></label>
<input name="email" id="email" value="your email" onFocus="clearText(this)" onBlur="clearText(this.className = 'onblurtext')"/>
</div>
</div>
</fieldset>

<!-- third page -->
<fieldset id="page_three">
<p...

CSS

/* form styling */ 

#form_wrapper {
    width:598px; 
}

#field_wrapper {
    width: 588px;
    height: 213px;
    border: 1px solid #000000;
    margin-top: -2px;
    border-radius: 3px;
}

p.form_title {
    color: #999999 !important;
    font-size: 24px !important;
    margin-left: 13px;
    margin-top: 45px;
}

/* for firefox */
@-moz-document url-prefix() {

p.form_title {
    margin-top: 37px;
}

}

#form_wrapper form#multipage.multipage fieldset#page_one.active label.selection span {
    text-align: center !important;
    display: block;
    color: #cc0000;
    margin-top: 0px;
    font-size:13px;
}

/* page one styling */

    input.selection { 
        display: none 
        }
    label.selection { 
        background-color: #ffffff; 
        color: #333333;
        font-size: 13px;
        border-radius: 3px;
        display: inline-block;
        cursor: pointer;
        border: solid 1px #000000;
        width: 271px;
        padding: 8px;
        margin-right: 8px;
        vertical-align: top;
        margin-top: -2px;
        line-height: 18px;
        height: 197px;
    }

        label.selection:hover { 
        background-color: #ffffff; 
        border-radius: 2px;
        display: inline-block;
        cursor: pointer;
        border: solid 1px #000000;
        width: 271px;
    }

    input.selection:checked + label.radio {
        background-color: #ffffff; 
        color: #333333;
        border-radius: 2px;
        border: solid 1px #000000;
    }

#form_wrapper form#multipage.multipage fieldset#page_one {
    margin-bottom: 113px;
}

/* page two styling */

#form_wrapper form#multipage.multipage fieldset#page_two.active div#field_wrapper div.control-group input#name {
    margin-bottom: 18px;
    margin-top: 20px;
    outline: none;
}

#form_wrapper form#multipage.multipage fieldset#page_two.active div#field_wrapper div.control-group input{
    border: 1px solid #000000;
    border-radius: 3px;
    height: 37px;
    width: 217px;
   ...

JavaScript

//jquery multipage behaviour

$('#multipage').multipage({transitionFunction:transition, 'inactiveDot': '<img src="non_active_page.png" style="margin-right: 5px">', 'activeDot': '<img src="active_page.png" style="margin-right: 5px">'});

$('form').submit(function(){ alert("Submitted!"); return false;});

function transition(from,to) {
$(from).fadeOut('fast',function(){$(to).fadeIn('fast');});
};

// progresses user to next page on clicking option one or two on the front page
$("#option1, #option2").click( function(){
$('#multipage').nextpage();
});

// jquery validate behaviour
$('#multipage').validate(
{
onfocusout: function(element) { jQuery(element).valid(); } ,
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
messages: {
name: "validating...please enter your name",
email: {
required: "validating...please enter your email",
email: "validating...please enter a valid email"
},
message: "validating...please enter your message"
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});

// javascript onfocus and onblur events for input fields

window.clearText = function(field){
   if (field.defaultValue == field.value) field.value = '';
   else if (field.value == '') field.value = field.defaultValue;
};