jQuery Validation Bootstrap Tooltip

jQuery Validation Bootstrap Tooltip is a drop in extension replacing error labels from jQuery Validation plugin with Twitter Bootstrap tooltips

Requirements

• jQuery
• jQuery Validation
• Twitter Bootstrap

Source: thrilleratplay.github.io

1. INCLUDE CSS AND JS FILES

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" /></script>
<script type="text/javascript" src="js/jquery.validate.js" /></script>
<script type="text/javascript" src="js/jquery-validate.bootstrap-tooltip.js" /></script>

2. HTML

<form id="theform">
	<input type="text" name="example1" required>
	<input type="number" data-placement="bottom" name="example2" required name="example2">
	<input type="text" class="required email" data-trigger="focus" name="example3"">
	<input type="text" name="example4">
	<input type="checkbox" name="example5">
	<input type="submit" class="btn btn-primary pull-right" value="Check">
</form>

3. JAVASCRIPT

$(document).ready(function(){
	$("#theform").validate({
		rules: {     
			example4: {email:true,required: true},
			example5: {required: true}
		},
		messages: {
			example5: "Just check the box<h5 class='text-error'>You aren't going to read the EULA</h5>"
		},
		tooltip_options: {
			example4: {trigger:'focus'},
			example5: {placement:'right',html:true}
		},
		submitHandler: function(form) { 
			$("#validity_label").html('<div class="alert alert-success">No errors.  Like a boss.</div>');
		},
		invalidHandler: function(form, validator) {
			$("#validity_label").html('<div class="alert alert-error">There be '+validator.numberOfInvalids()+' error'+(validator.numberOfInvalids()>1?'s':'')+' here.  OH NOES!!!!!</div>');
		}
	});
});