JSFiddle - React, Tailwind, and code Playground

by Dale Hollocher

HTML

<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
<title>jQuery accordion form with validation</title>
<body>
<div id="wrap">
	<div id="main">
		<h1 class="top bottom">
			<span>Help me</span>Buy and Sell a House</h1>
		<h2>This form is quick &amp; easy to complete - in only 3 steps!</h2>
		<form name="cmaForm" id="cmaForm" method="post">
			<input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100">
			<input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3">
			<ul id="stepForm" class="ui-accordion-container">
				<li id="sf1">
					<a href='#' class="ui-accordion-link"></a>
					<div>
						<fieldset>
							<legend>Step 1 of 3</legend>
							<div class="requiredNotice">*Required Field</div>
							<h3 class="stepHeader">Tell us about the property you're buying</h3>

							<div class="formspacer"></div>
							<br>
							<label for="recordPurchasePriceRangeID" class="input required">Purchase price range:</label>
							<select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageReq" title="Select a Price Range">
								<option value="">-Select-</option>
								<option value="1"></option>
								<option value="2">$75,000 - $100,000</option>
							</select>
							<br>
							<label for="recordPurchaseState" class="input required">State:</label>
							<select name="recordPurchaseState" id="recordPurchaseState" class="inputclass pageReq" title="Select a State">
								<option value="">-Select-</option>
								<option value="AL">Alabama</option>
							</select>
							<br>
							<label for="recordPurchasePropertyTypeID" class="input">Desired property type:</label>
							<select name="recordPurchasePropertyTypeID"...

CSS

/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
   TEMPLATE NAME: 	Techmania 1.0
	TEMPLATE CODE: 	S-0003
    VERSION:         1.1          	
 *******************************************/
	/********************************************
   HTML ELEMENTS
********************************************/ /* Top elements */
	/** { margin:0; padding: 0; }*/
body {
	background-color: #000;
	color: #555;
	font: 78%/ 1.6 Verdana, 'Trebuchet MS', arial, sans-serif;
	text-align: center;
	margin: 15px 0;
}

/* links */
a {
	color: #213540;
	background: inherit;
	text-decoration: none;
}

a:hover {
	color: #3e4255;
	text-decoration: underline;
	background: inherit;
}

/* headers */
h1,h2,h3 {
	font-family: 'Trebuchet MS', Arial, sans-serif;
	font-weight: bold;
}

h1 {
	font-size: 1.5em;
	margin: 10px 15px;
}

h2 {
	font-size: 1.3em;
	text-transform: uppercase;
	color: #339900;
	margin: 10px 15px;
}

h3 {
	font-size: 1.1em;
	color: #333;
	margin: 16px 0 0 18px;
}

h1,h2,h3 {
	padding: 0;
}

p {
	line-height: 1.4em;
	padding: 0 15px;
}

p.error {
	color: #CC0033;
}

ul,ol {
	margin: 10px 6px;
	padding: 0 15px;
	color: #006699;
}

ul span,ol span {
	color: #666666;
}

/* images */
img {
	border: 2px solid #CCC;
}

img.float-right {
	margin: 5px 0px 10px 10px;
}

img.float-left {
	margin: 5px 10px 10px 0px;
}

code {
	margin: 5px 0;
	padding: 10px;
	text-align: left;
	display: block;
	overflow: auto;
	font: 500 1em/ 1.5em 'Lucida Console', 'courier new', monospace;
	/* white-space: pre; */
	background: #FAFAFA;
	border: 1px solid #EAEAEA;
	border-left: 5px solid #72A545;
}

acronym {
	cursor: help;
	border-bottom: 1px solid #777;
}

blockquote {
	margin: 15px;
	padding: 0 0 0 32px;
	background: #FAFAFA url(quote.gif) no-repeat 5px 10px !important;
	background-position: 8px 10px;
	border: 1px solid #EAEAEA;
	border-left: 5px solid #72A545;
	font-weight: bold;
}

/* form elements */
fieldset {
	margin: 12px 12px...

JavaScript

$(document).ready(function() {
		$("#recordClientPhone").mask("(999) 999-9999");
		$("#recordClientPhoneAlt").mask("(999) 999-9999");
		$("#recordClientZip").mask("99999");
		$("#recordPropertyZip").mask("99999");
		$("#recordPurchaseZip").mask("99999");

		// add * to required field labels
		$('label.required').append('&nbsp;<strong>*</strong>&nbsp;');

		// accordion functions
		var accordion = $("#stepForm").accordion();
		var current = 0;

		$.validator.addMethod("pageReq", 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";
		}, $.validator.messages.required)

		var v = $("#cmaForm").validate({
			errorClass: "warning",
			onkeyup: false,
			onfocusout: false,
			submitHandler: function() {
				alert("Submitted, thanks!");
			}
		});

		// back buttons do not need to run validation
		$("#sf2 .prevbutton").click(function() {
			accordion.accordion("option", "active", 0);
			current = 0;
		});
		$("#sf3 .prevbutton").click(function() {
			accordion.accordion("option", "active", 1);
			current = 1;
		});
		// these buttons all run the validation, overridden by specific targets above
		$(".open2").click(function() {
			if (v.form()) {
				accordion.accordion("option", "active", 2);
				current = 2;
			}
		});
		$(".open1").click(function() {
			if (v.form()) {
				accordion.accordion("option", "active", 1);
				current = 1;
			}
		});
		$(".open0").click(function() {
			if (v.form()) {
				accordion.accordion("option", "active", 0);
				current = 0;
			}
		});
	});