JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.anoopenterprises.com/iregs/js/plugins/validator/jquery.validationEngine.js"></script>
<script src="http://www.anoopenterprises.com/iregs/js/plugins/validator/jquery.validationEngine-en.js"></script>
<link rel="stylesheet" href="http://www.anoopenterprises.com/iregs/js/plugins/validator/validationEngine.jquery.css">
<link rel="stylesheet" href="http://www.anoopenterprises.com/iregs/js/plugins/validator/template.css">
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<form id="frmTest" style="position:relative">
<div id="divContents" style="position:relative; overflow-y:auto; overflow-x:none;">
<div class="row1">
<span>FName:</span>
<input id="txtFName" data-prompt-position="bottomRight" class="validate[required] text-input" tabindex="1" />
</div>
<div class="row2">
<span>LName:</span>
<input id="txtLName" class="validate[required] text-input" tabindex="2" />
</div>
<div class="row3">
<span>Age:</span>
<input id="txtAge" class="validate[required, custom[integer],min[1]] text-input" tabindex="3" />
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="submit" id="btnSubmit" value="Submit" />
</form>
CSS
body
{
margin: 0 auto;
font-family: Arial;
font-size: 12px;
line-height: 20px;
}
div.row1, div.row2, div.row3
{
min-height: 350px;
}
span
{
clear: both;
float: left;
margin-left: 10px;
padding: 20px 5px 0 20px;
width: 50px;
}
#txtFName, #txtLName, #txtAge
{
margin-top: 20px;
}
input[type=text]
{
width: 150px;
}
JavaScript
$('#frmTest').validationEngine();
$('#txtFName').focus();
$('#btnSubmit').click(function(){
return $('#frmTest').validationEngine();
});