JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form id='test'>
<section class='form-group col-sm-4 col-xs-12'>
<label class='control-label'>Name</label>
<input type='text' class='form-control name' />
</section>
<section class='form-group col-sm-4 col-xs-12'>
<label class='control-label'>Gender</label>
<select class='form-control gender'>
<option value='' selected> --Gender--</option>
<option value='Male'>Male</option>
<option value='Female'>Female</option>
</select>
</section>
<section class='form-group col-sm-4 col-xs-12'>
<label class='control-label'>DOB</label>
<input type='text' class='form-control dob' />
</section>
<section class='clearfix'></section>
</div>
<div class='child'>
<section class='form-group col-sm-4 col-xs-12'>
<label class='control-label'>Name</label>
<input type='text' class='form-control name' />
</section>
<section class='form-group col-sm-4 col-xs-12'>
<label class='control-label'>Gender</label>
<select class='form-control gender'>
<option value='' selected> --Gender--</option>
<option value='Male'>Male</option>
<option value='Female'>Female</option>
</select>
</section>
<section class='form-group col-sm-4 col-xs-12'>
<label class='control-label'>DOB</label>
<input type='text' class='form-control dob' />
</section>
...
JavaScript
$('.dob').datepicker();
(function($){
var _defaults = null;
// functions object where the validator functions are stored for use
var functions = {
notEmpty : function(value){
return value && $.trim(value).length > 0;
},
required : function(value){
return value && $.trim(value).length > 0;
},
isEmail : function(value){
var check = true;
if(value.length)
check = /^([^@\s\t\n]+\@[\w\d]+\.[\w]{2,3}(\.[\w]{2})?)$/.test(value);
return check;
},
isPhoneNumber : function(value){
var check = true;
if(value.length)
check = /^(\d\-)?\(?\d{3}\)?[\-|\s]?\d{3}[\-|\s]?\d{4}$/.test(value);
return check;
},
isNumber : function(value){
var check = true;
if(value.length)
check = /^[+-]?\d+(\.\d+)?$/.test(value);
return check;
},
isSSN : function(value){
var check = true;
if(value.length)
check = /^\d{3}\-?\d{2}\-?\d{4}$/.test(value);
return check;
},
isString : function(value){
var check = true;
if(value.length)
check = /^\D+$/.test(value);
return check;
},
isURL : function(value){
var check = true;
if(value.length)
check = /^([http\:\/\/]+)?([a-zA-Z]+)?\.?[a-zA-Z0-9\-]+\.[a-zA-Z]+$/.test(value);
return check;
},
isDateTime : function(value, regex){
var check = true;
if(regex == null){
return true;
}
var regexChars = regex.split("");
var pattern = "^";
for(var i = 0; i < regexChars.length; i++){
switch(regexChars[i]){
case "d" :
case "j" :
pattern = pattern + "(0?[1-9]|[12][0-9]|3[01])";
break;
case "D":
pattern = pattern + "(Sun|Mon|Tue|Wed|Thu|Fri|Sat)";
case "l" :
pattern = pattern + "(Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday)";
break;
case "F" :
pattern = pattern + "(January|February|March|April|May|June|July|August|September|October|November|December)";
break;
case "M" :
pattern = pattern +...