JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/jzaefferer/jquery-validation/1.10.0/jquery.validate.js"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
<div id="main">
<p>Step 1 - Account Information</p>
<form class="cmxform" id="accountInformation" method="post" action="page2.html">
<fieldset>
<p>
<label for="accountNumber">Account Number</label>
<input id="accountNumber" name="accountNumber" placeholder="XXXXXXXXXXXXXXXX" type="tel" size="32" />
</p>
<label for="dob">Date of Birth</label>
<table class="tabless">
<tr>
<td><select name="month" data-theme="e">
<option selected="" value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="Decemeber">December</option>
</select></td>
<td><select name="day">
<option selected="" value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
...
JavaScript
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$(document).ready(function() {
$("#accountNumber").mask("9999-9999-9999-9999");
$("#ssn").mask("999-99-9999");
// validate signup form on keyup and submit
$("#accountInformation").validate({
rules: {
firstname: "required",
lastname: "required",
accountNumber: {
required: true,
maxlength: 16
},
ssn: {
required: true,
minlength: 9
},
month: {
required: true,
},
day: {
required: true,
},
year: {
required: true,
},
},
messages: {
accountNumber: "Please enter your Account Number",
month: {
required: "Please select the month you were born",
},
password: {
required: "Please select the day you were born",
},
confirm_password: {
required: "Please select the year you were born",
},
ssn: {
required: "Please enter your Social Security Number",
},
}
});
});