JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://jquery.bassistance.de/validate/demo/multipart/js/jquery.maskedinput-1.0.js"></script>
<script src="http://jquery.bassistance.de/validate/demo/multipart/js/ui.core.js"></script>
<script src="http://jquery.bassistance.de/validate/demo/multipart/js/ui.accordion.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="wrap" class="span10">
<div id="main">
<h1 class="top bottom"><span>Help me</span> Buy and Sell a House</h1>
<h2>This form is quick & easy to complete - in only 3 steps!</h2>
<form name="cmaForm" id="cmaForm" method="post" action="">
<input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100" />
<input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3" />
<br>
<ul id="stepForm" class="ui-accordion-container" style="list-style-type: none;">
<li id="sf1">
<h3> 1. Tell us about the property you're buying<a href='#' class="ui-accordion-link"></a> </h3>
<div >
<ul id="accordion1">
<li >
<h2>When would you like to move?</h2>
<div>
<table>
<tr>
<td>
When?
</td>
<td>
<input type="text" name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired"
rel="twipsy"...
CSS
#stepForm .ui-icon { display: none; }
#stepForm .ui-accordion-header a { padding-left: 0 }
JavaScript
$(document).ready(function(){
var DetailsModel = function(details) {
var self = this;
self.details = ko.observableArray(details);
self.reload = function() {
self.details();
}
};
var viewModel = new DetailsModel([
{ name: ""}
]);
ko.applyBindings(viewModel);
// accordion functions
var accordion = $("#stepForm").accordion({ autoHeight: false,animated: 'slide', event: false});
var current = 0;
$.validator.addMethod("pageRequired", function(value, element) {
var $element = $(element)
function match(index) {
return current == index && $(element).parents("#sf" + (index + 1)).length;
}
if (match(0) || match(1) || match(2)) {
return !this.optional(element);
}
return "dependency-mismatch";
}, function(value, element){
var _popover = $(element).popover({
trigger: 'manual',
placement: 'right',
content: $.validator.messages.required,
template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content alert-error"><p></p></div></div></div>'
});
_popover.attr('data-content', $.validator.messages.required);
$(element).popover('show'); }
)
var v = $("#cmaForm").validate({
submitHandler: viewModel.save,
showErrors: function(errorMap, errorList) {
$.each( this.successList , function(index, value) {
$(value).popover('hide');
});
$.each( errorList , function(index, value) {
var _popover = $(value.element).popover({
trigger: 'manual',
...