JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.wowgeeks.com/assets/js/jquery.validate.js"></script>
<link rel="stylesheet" href="https://dev2.beamboard.com/css/steps.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<form method='post' action='/setup/submit' class="register" id="register">
<fieldset>
<div class="control-group pos-rel"> <a href="javascript:void(0);" id="facebook-signup" class=""> <img src="/images/signup_facebook.png" alt="" /> </a>
</div>
<div class="row">
<div class="span6">
<div class="control-group">
<label class="control-label" for="name">First Name<span class="req">*</span>
</label>
<div class="controls">
<input type="text" class="input-block-level required" id="name" name="name"
placeholder="" value='' /> <span class="help-block">Please enter your first name.</span>
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label" for="lname">Last Name<span class="req">*</span>
</label>
<div class="controls">
<input type="text" class="input-block-level required" id="lname" name="lname"
placeholder="" value='' /> <span class="help-block">Please enter your last name.</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div class="control-group">
<label class="control-label" for="username">Username<span class="req">*</span>
</label>
<div class="controls">
<input type="text" class="input-block-level required" id="username" name="username"
...
JavaScript
$('#register').validate({
rules: {
name: {
minlength: 2,
required: true
},
lname: {
minlength: 2,
required: true
},
username: {
minlength: 2,
required: true,
remote: {
url: '/setup/verify_username/',
cache: false
}
},
email: {
required: true,
email: true,
remote: {
url: '/setup/verify_email/',
cache: false
}
},
password: {
required: true,
minlength: 5,
maxlength: 250
},
password2: {
equalTo: '#password'
},
postal_code: {
required: true,
minlength: 5
},
timezones: {
required: true
},
mp: {
minlength: 10,
required: true
},
gender: {
required: true
},
dob: {
required: true,
date: true
}
},
messages: {
name: "Please enter your first name",
lname: "Please enter your last name",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
email: "Please enter a valid email address",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password2: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same passwords"
},
postal_code: "Please enter a valid zip code",
timezones: "Please select a time zone",
mp: "Please enter a valid mobile number. Only numbers please.",
...