jquery.validate.bootstrap.popover

Show error message via bootstrap popover for jquery validate.

Instead of calling $('#form_id').validate(), call this:

$(function() { 	$('#form_id').validate_popover(); }); 

Check live demo here and here.

Dependency

• jquery
• jquery.validate
• bootstrap 3

Options

The plugin accepts options as a single object argument. Pass in the options like this:

$('#form_id').validate_popover({ popoverPosition: 'top' }); 

Supported options are:

• popoverPosition Supported values: 'right', 'top'; default to 'right'

• popoverContainer The container popover message will append to, default: 'body'

• hideForInvisible The flag to control if popover should be hidden for invisible validated element, default: true

• beforeShowError A function will be called before the error popover shows, this of the function is the input html element validated:

    $('#form_id').validate_popover({ beforeShowError: function(message) {        alert(this.name + ": " + message);      }   }); 

• get_offset_element A function will be called when positioning error popover relative to the returned element, default implmentation is returnning the validated element. e.g. Issue 6:

    $('#form_id').validate_popover({ get_offset_element: function(element) {       if ($(element).attr("id") == "test") {           return $(element).siblings('.bootstrap-select');       } else {           return $(element);       }     }   }); 

HTML data attribute options

• data-popover-position Supported values: 'right', 'top', this will override the global setting passed to validate_popover calling.

    data-popover-position = "top" 

• data-popover-offset Adjust the offset of the popover message, format is "top,left", like the following example will decrease the top by 10, and increase the left by 100:

    data-popover-offset = "-10,100" 

• data-popover-hide-for-invisible Set to false to allow error popover is displayed even for invisible validated element:

    data-popover-hide-for-invisible="false" 

Public Methods

Public methods could be called:

$.validator.reposition(); // re-position all popovers 

Public methods list:

• hide_validate_popover Hide the popover for a validated element:

    $.validator.hide_validate_popover($("#client_email")); 

• show_error Display error message programatically for an element:

    $.validator.show_error("You need to choose a template from the list.", $("#template")); 

• reposition Re-position all popovers when no argument is given; otherwise, only re-position popovers for given validated elements. Useful to put into window resize handler. e.g.

    $.validator.reposition($("#client_email, #client_password")); 

License

jquery.validate.bootstrap.popover is licensed under the MIT license.