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

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.

mobigo / jquery.validate.bootstrap.popover Goto Github PK