JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="msg">Mesage</label>
<div class="col-sm-10">
<textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
</div>
</div>
<div class="form-group">
<label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" id="sub" name="sub" value="Send">
</div>
</div>
</form>
JavaScript
$(document).ready(function(){
$('#contactForm').bootstrapValidator({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: [':disabled'],
fields: {
name: {
validators: {
notEmpty: {
message: 'The Full Name field is required'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The Email field is required'
}
}
},
msg: {
validators: {
notEmpty: {
message: 'The Message field is required'
}
}
},
captcha: {
validators: {
notEmpty: {
message: 'The Captcha field is required'
}
}
}
}
});
});