Get new jQuery plugins just once a week

×

Validation Bootstrap Tooltip

January 26, 2015

Validation Bootstrap tooltip | jQuery plugin for form validation message in Bootstrap tooltips

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

Example js code:

$("#theform").validate({
rules: {
example4: {email:true, required: true},
example5: {required: true}
},
messages: {
example5: "Just check the box

You aren't going to read the EULA

"
},
tooltip_options: {
example4: {trigger:'focus'},
example5: {placement:'right',html:true}
},
});

Created by Tom Hiller

Download

Example

validation bootstrap tooltip

error messages

jQuery-Validation-Bootstrap-tooltip

A drop in extension replacing error labels from jQuery Validation plugin with Twitter Bootstrap tooltips

Requirements

Usage

Tooltip options are given either through an element's data attributes or as objects set during validate initializing. An example would be:

    $("#theform").validate({
        rules: {
           thefield: { digits:true, required: true }
        },
        tooltip_options: {
           thefield: { placement: 'left' }
        }
     });

ASP MVC developers

There is an equivalent project that caters to jQuery Validation Unobtrusive, johnnyreilly/jQuery.Validation.Unobtrusive.Native and also provides tooltip errors

Changelog

Demo

Demo or it didn't happen


Special Thanks to dennysfredericci

Who's gist (found here)was the basis of this extension.

Validation Bootstrap Tooltip

Related posts:

bootstrap-select
bootstrap-wysiwyg
EasySelect
validation bootstrap tooltip

http://jquer.in/wp-content/uploads/2015/01/validation-bootstrap-tooltip.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever