JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css">
<form id="contactForm" class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First and Last name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="type" placeholder="type of move" />
</div> <!--col-->
</div><!--row-->
</div><!--form group-->
<div class="form-group">
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" name="phoneNumber" placeholder="Phone" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="rooms" placeholder="# of bedrooms" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-4">
<input type="text" name="email" class="form-control" placeholder="Email" id=""/>
</div>
<div class="col-xs-4">
<input type="text" name="MoveFromZip" class="form-control" placeholder="Move From Zip"/>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-4">
<input type="text" name="MoveDate" class="form-control" placeholder="Move Date" id="datepicker" class="hasDatepicker"/>
</div>
<div class="col-xs-4">
<input type="text" name="MoveFromZip" class="form-control" placeholder="Move From Zip"/>
...
CSS
#contactForm
{
padding: 50px;
}
JavaScript
$(document).ready(function() {
// Generate a simple captcha
$('#contactForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
phoneNumber: {
row: '.col-xs-4',
validators: {
country: 'United States',
notEmpty: {
message: 'The phone number is required'
},
stringLength: {
max: 14,
message: 'Maximum digits exceeded'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
email: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The email address is required'
},
regexp: {
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
...