JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/13809851/jquerystepsissue/jquery.steps.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/13809851/jquerystepsissue/jquery.steps.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<form id="form-3" action="#">
<h1 class="noDisplay">Account</h1>
<fieldset>
<legend>Account Information</legend>
<h3> Your Information</h3>
<ul>
<li>
 <div><label for="userName">User name *</label></div>
 <div><input id="userName" name="userName" type="text" class="required" data-msg-required="Username Required!"/></div>
 <div class="cell"><div class="registerError"></div></div>
			</li>
			<li>
				<div><label for="password">Password *</label></div>
				<div><input id="password" name="password" type="text" class="required" data-msg-required="Password Required!"></div>
				<div class="cell"><div class="registerError"></div></div>
			</li>
			<li>
				<div><label for="confirm">Confirm Password *</label></div>
				<div><input id="confirm" name="confirm" type="text" class="required" data-msg-required="Confirm Password Required!"></div>
				<div class="cell"><div class="registerError"></div></div>
			</li>   
		</ul>
		<p>(*) Mandatory</p>
	</fieldset>
 
	<h1 class="noDisplay">Profile</h1>
	<fieldset>
		<legend>Profile Information</legend>
		<h3> Your Information</h3>
		<label for="name">First name *</label>
		<input id="name" name="name" type="text" class="required">
		<label for="surname">Last name *</label>
		<input id="surname" name="surname" type="text" class="required">
		<label for="email">Email *</label>
		<input id="email" name="email" type="text" class="required email">
		<label for="address">Address</label>
		<input id="address" name="address" type="text">
		<label for="age">Age (The warning step will show up if age is less than 18) *</label>
		<input id="age" name="age" type="text" class="required number">
		<p>(*) Mandatory</p>
	</fieldset>
 
	<h1...

CSS

<style type="text/css">
.noDisplay{
    display: none;
}
ul[role="tablist"] {
    display: none;
}
</style>

JavaScript

$(function ()
{
  
  $("#form-3").steps({
	  bodyTag: "fieldset",
	  headerTag: "h1",
	  onStepChanging: function (event, currentIndex, newIndex)
	  {
		  // Always allow going backward even if the current step contains invalid fields!
		  if (currentIndex > newIndex)
		  {
			  return true;
		  }
		  
		  // Forbid suppressing "Warning" step if the user is to young
		  if (newIndex === 3 && Number($("#age").val()) < 18)
		  {
			  return false;
		  }
		  
		  var form = $(this);
		  
		  // Clean up if user went backward before
		  if (currentIndex < newIndex)
		  {
			  // To remove error styles
			  $("#form-3 .body:eq(" + newIndex + ") label.error", form).remove();
			  $("#form-3 .body:eq(" + newIndex + ") .error", form).removeClass("error");
		  }
		  
		  
		  return true;
	  },
	  onStepChanged: function (event, currentIndex, priorIndex)
	  {
		  // Suppress (skip) "Warning" step if the user is old enough.
		  if (currentIndex === 2 && Number($("#age").val()) >= 18)
		  {
			  $(this).steps("next");
		  }
		  
		  // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
		  if (currentIndex === 2 && priorIndex === 3)
		  {
			  $(this).steps("previous");
		  }
	  },
	  onFinishing: function (event, currentIndex)
	  {
		  
		  return true;
	  },
	  onFinished: function (event, currentIndex)
	  {
		  var form = $(this);
		  
		  // Submit form input
		  form.submit();
	  }
  })
});