Stepy Wizard and MVC3 unobtrusive validation
HTML
<script src="http://www.wbotelhos.com/stepy/js/jquery.validate.min.js"></script>
<script src="http://www.wbotelhos.com/stepy/js/jquery.stepy.js"></script>
<script src="https://github.com/brandonaaron/livequery/raw/master/jquery.livequery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset title="Step 1">
<legend>Absence</legend>
<p>
Some text.
</p>
</fieldset>
<fieldset title="Step 2">
<legend>Adresses</legend>
<div class="leftForm">
<h4>Current Address</h4>
<p>Steven Svensson</p>
<p>2615 151st Place NE</p>
<p>Redmond Washington 98052</p>
<p>USA</p>
<p>Phone: 1 425 9229202</p>
<p>Fax: +49 441 99848-70</p>
<p>
Would you like to make a residential market entry?<br />
<input type="checkbox" name="checkMarket" value="check" />
<label for="checkMarket">yes</label>
</p>
</div>
<div class="rightForm">
<h4>Relocation Address</h4>
<p>
<label for="addressLn1">Address: </label>
<input type="text" name="addressLn1"
data-val="true" data-val-required="Address is required" data-val-regex="Please specify a valid adsress" data-val-regex-pattern="^([A-ZÄÖÜ][a-zäöüß]+(([.] )|( )|([-])))+[1-9][0-9]{0,3}[a-z]?$"
/>
<span class="field-validation-valid" data-valmsg-for="addressLn1" data-valmsg-replace="true"></span>
</p>
<p>
<label for="addressLn2">Address (cont'd): </label>
<input type="text" name="addressLn2"...
CSS
@CHARSET "UTF-8";
a.button-back, a.button-next, input.finish {
background-color: #AAA;
color: #FFF;
font: 10px verdana;
padding: 5px 10px;
}
input.finish {
padding: 3px 9px;
}
a.button-back, a.button-next, input.finish, fieldset.step {
border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-opera-border-radius: 4px;
-webkit-border-radius: 4px;
}
a.button-back:hover, a.button-next:hover, input.finish:hover {
background-color: #6699CC;
}
a.button-back {
float: left;
text-decoration: none;
}
a.button-next {
float: right;
text-decoration: none;
}
fieldset.step {
/*border: 1px solid #DDD;*/
clear: left;
font: 10px verdana;
padding: 10px;
}
fieldset.step legend {
color: #2E3E4D;
font: bold 14px verdana;
padding: 0 2px 3px 2px;
display: none;
}
fieldset.step div {
width: 300px;
}
.rightForm input {
float: right;
}
.rightForm input[type=text] {
width: 170px;
}
.leftForm, .rightForm {
float: left;
}
.rightForm {
margin-left: 30px;
}
fieldset.step h4 {
color: #2E3E4D;
font: bold 12px verdana;
}
fieldset.step p {
margin: 5px 3px;
}
.formElem-buttons {
clear: both;
}
fieldset.step input, fieldset.step textarea, fieldset.step select {
border: 1px solid #AAA;
font: 10px verdana;
margin-left: 7px;
}
fieldset.step label {
color: #444;
font: bold 10px verdana;
margin-top: 10px;
margin: 10px 0 3px 7px;
}
input.finish {
border-style: none;
cursor: pointer;
float: right;
text-decoration: none;
}
li.error-image {
background: url('http://www.wbotelhos.com/stepy/img/error.png') no-repeat right top;
}
ul.stepy-titles {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#cccccc');
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe),...
JavaScript
$(document).ready(function () {
$('#formElem').stepy({
titleClick: true,
block: true,
validate: true,
errorImage: true
});
$('ul.stepy-titles').livequery(function () {
$(this).append('<div style="clear: both;" />');
});
});
// green: #58A302
// darkblue: #2E3E4D