bValidator documentation & examples

Download

Download bValidator from here (currently v<%= version; %>)

Or install with Bower:

<%= include('pre/setup-bower.html'); %>

Or install with npm:

<%= include('pre/setup-npm.html'); %>

Git repository: https://github.com/bmauser/bvalidator.git

Include JavaScript

To use bValidator you need to include jQuery, jquery.bvalidator.min.js and .js and .css files for the theme you want to use.

<%= include('pre/setup-include-js.html'); %>

Include CSS for the theme

<%= include('pre/setup-css.html'); %>

HTML

The page should contain inputs you want to validate:

<%= include('pre/setup-html.html'); %>

Add data-bvalidator-validate attribute to the <form> you want to validate to bind bValidator to the form.
To each you want to validate, add data-bvalidator attribute with validation functions to invoke for the field.

With JavaScript

You can also bind bValidator to the form with JavaScript (in that case data-bvalidator-validate attribute is not needed on the <form>). You can use jQuery's $(document).ready to execute the script as soon as the web page has been loaded:

<%= include('pre/setup-js.html'); %>

Upgrade form version 0.x

bValidator 1.x is not backward compatible with version 0.x. Basic features are similar to those in 0.x, but I have introduced a lot of changes into 1.x without backward compatibility in mind. Please read this docs before upgrade.

bValidator first checks default options. You can change default options like this:

<%= include('pre/options-default.html'); %>

You can also set options by passing an object with options to the constructor function:

<%= include('pre/options-obj.html'); %>

bValidator also checks for options set by data-bvalidator-option- attribute on the <form> element. For example, for singleError use the data-bvalidator-option-single-error attribute name:

<%= include('pre/options-attr.html'); %>

Option name	Default value	Description
singleError	`false`	If `true`, only the first validation message will be shown.
scrollToError	`true`	The page will be scrolled up or down to make the first message visible.
scrollToErrorOffset	`-10`	Offset from the top of the browser window.
lang	`"en"`	Language for validation messages.
validateOn	`""`	Input field event which starts validation; examples: `change`, `blur`. To bind more events, separate them by comma; example:`keyup,change`. This option will not be applied on checkboxes and radio buttons.
errorValidateOn	`"keyup"`	Input field event to start validation if the validation message is already shown; examples: `change`, `blur`. To bind more events, separate them by comma; example: `keyup,paste`.
useTheme	`""`	Theme for validation messages.
delayValidation	`300`	Delay in milliseconds to invoke validation after `validateOn` and `errorValidateOn` events.
validateOnSubmit	`true`	If `true`, validation will occur on form submit (if validator is bind to a form).
stopSubmitPropagation	`true`	If `true`, `submit` event propagation will be stopped on validation error (if validator is bind to a form). This option is considered only if the value of `validateOnSubmit` option is `true`.
validateTillInvalid	`false`	If there are more validation functions in `data-bvalidator` attribute, they are all invoked after the validation has been triggered. If you set this option to `true`, functions will be invoked until one of the function returns `false`. For example: `data-bvalidator="number,max[10]"`. If check with `number` function fails, `max` function will not be invoked. See example.
autoModifiers	`{'digit': ['trim'], 'number': ['trim'], 'email': ['trim'], 'url': ['trim'], 'date': ['trim'], 'ip4': ['trim'], 'ip6': ['trim']}`	This option tells which modifiers are automatically called for a validation function. trim modifier is called for stated functions by default, so you don't have to explicitly put the modifier into `data-bvalidator-modifier` attribute. You can set more auto modifiers for one validation function and use parameters as in `data-bvalidator` attribute. For example: `'mycheck': ['trim', 'myMod', 'myMod2[1:3]']`
ajaxValid	`"ok"`	Valid response for server side validation with ajax validation function. If the value is valid, Ajax request should return this string.
ajaxResponseMsg	`false`	If `true`, a response from the server is used as the validation message.
ajaxOptions	`{cache: false, method: 'POST'}`	Options for Ajax request. See jQuery documentation.
ajaxParams	`null`	Object (or function that returns an object) with values that are sent to the server with the request. For example: `{'id':123}`.
ajaxUrl	`""`	URL for Ajax request. If empty, current browser URL is used.
ajaxCache	`true`	If `true`, Ajax response from the server will be cached and the response from cache will be used if the input value is not changed since the last Ajax call.
skipValidation	`":hidden, :disabled"`	jQuery selector to filter out inputs that will be skipped by bValidator (only inputs with `data-bvalidator` attribute are considered).
noMsgIfExistsForInstance	`[]`	This option can be useful if you are using more bValidator instances on the same form and you don't want to show a message if a message is already shown for the instance specified by this option. If a message is already shown it will not be removed. Example: `["myinstance"]`
paramsDelimiter	`":"`	Delimiter for validation function arguments inside square brackets `[]` in `data-bvalidator` attribute.
actionsDelimiter	`","`	Validator functions delimiter in `data-bvalidator` attribute.
html5ValidationOff	`true`	If `true`, HTML5 validation will be disabled for the forms bValidator is bound to.
enableHtml5Attr	`true`	If `true`, bValidator will validate HTML5 input types: `email`, `url`, `number` and inputs with attributes: `min`, `max`, `minlength`, `maxlength`, `pattern`, `required`.
forceValidationResult	`null`	Set to `true` or `false` to force validation result for all inputs inside the form.

Also see theme options.

bValidator can retrieve validation messages from:

validation function
data-bvalidator-msg attribute
data-bvalidator-msg-functionName attribute
configuration object (options)
server response (example)

See examples.

You can use {0}, {1}, {2}, {3}, ... tags in the validation message and they will be replaced with validation function parameters in [].

You can change default messages or add new ones by changing default options:

<%= include('pre/messages-default.html'); %>

or pass messages as options to validator constructor:

<%= include('pre/messages.html'); %>

All default messages in English are listed in jquery.bvalidator.js file. For some other languages, there are .js files in lang folder.

If you create a translation file, please make a pull request on GitHub and I will merge it into the project.

Validation functions (validators) are functions that check the value and return true if the value is valid.

Modifying functions (modifiers) are functions that change the value of the field before validation, for example, to trim whitespace. Modifiers return a modified value.

Validations which will be invoked for an input are listed by default in data-bvalidator attribute. Modifiers are listed in data-bvalidator-modifier attribute.

Some functions can have parameters which are stated in square brackets [] and delimited with :, for example: mycheck[param1:param2:param3].

<%= include('pre/actions.html'); %>

Here are listed all built-in validation functions, but you can easily add your own.

Validator	Parameters	Description
alpha		Checks if all characters are alphabetic. Empty space (`' '`), underscore(`_`), minus (`-`) and period (`.`) are also valid.
alphanum		Checks if all characters are alphanumeric. Empty space (`' '`), underscore(`_`), minus (`-`) and period (`.`) are also valid.
digit		Checks if all characters are digits.
number		Checks if the input value is a number.
email		Checks if the input value is an E-mail.
url		Checks if the input value is a valid URL.
date	date format	Checks if the value is a valid date in the format specified by the function parameter. A format can be any combination of `mm`, `dd`, `yyyy` with one character separator between. Example: `date[mm.dd.yyyy]` or `date[yyyy-mm-dd]`
required		Sets a field as required. If you put `required` in front of other functions like `data-bvalidator="required,max[10],email"`, a message that the field is required will be shown with other validation messages. If you put `required` after other functions like `data-bvalidator="max[10],email,required"`, a message that the field is required will not be shown if there are other validation messages. Note that if a field is not marked as required and it is empty, it will be considered as valid and not validated at all. For example, if you have a field with `data-bvalidator="email"` and you leave it empty, `email` validation function will not be called on the form submit. If a field is not required, but you still want the validator to be called, use `valempty` function.
between	minimum value maximum value	Checks if the value is between values set by function parameters. Example: `between[5:10]` If this function is used with multi-select or checkbox in a group (checkboxes with the same name, for example `name="chk[]"`), it means that a number of selected options or checkboxes must be between values set by function parameters. See example.
max	maximum value	Checks if the value is less or equal to the function parameter. If this function is used with multi-select or checkbox in a group (checkboxes with the same name for example `name="chk[]"`), it means that a number of selected options or checkboxes must be less or equal to the function parameter. See example.
min	minimum value	Checks if the value is greater or equal to the function parameter value. If this function is used with select or checkbox in a group (checkboxes with the same name for example `name="chk[]"`), it means that a number of selected options or checkboxes must be greater or equal to the function parameter. See example.
rangelen	minimum length maximum length	Checks if length of the value is between values of function parameters. Example: `rangelen[5:20]`
maxlen	maximum length	Checks if length of the value is smaller than the function parameter value. Example: `maxlen[20]`
minlen	minimum length	Checks if length of the value is greater than the function parameter value. Example: `minlen[5]`
extension	file extensions	Checks if the value ends with '`.`' followed by any of passed parameters. Example: `extension[jpg:png:txt]`
ip4		Checks if the value is a valid IPv4 address.
ip6		Checks if the value is a valid IPv6 address. Note that this function uses a complex regular expression which can be pretty slow.
valempty		Validates field even if it's not marked as `required` and is empty. This function makes sense only if some other custom validation function is used on that field and the field is not `required`. See example.
ajax		Function for server side validation. See examples.
differ	element ID	Input value has to be different from the value of the field whose ID is passed as parameter. Example: `equal[myElementId]`
equal	element ID	Input value has to be equal to the value of the field whose ID is passed as parameter. Example: `differ[myElementId]`
pattern	pattern modifier (optional)	Checks if the value matches a regular expression pattern given by the function parameter. If the pattern contains characters like `[]`,`:` (same characters used by bValidator to parse function arguments), you'll have to use a custom validation function or use HTML5 `pattern` attribute.

Modifying functions

Modifier	Parameters	Description
trim		Removes whitespace from the beginning and the end of the input value.

Custom modifiers can be added in the same way as custom validation functions (see example).

When you make an instance of bValidator you can call some functions on that instance. You can get reference to a validator instance using jQuery data function:

<%= include('pre/api-instance.html'); %>

.data('bValidator') returns reference to the first instance of bValidator. You can have more instances of bValidator on the same form (see example) and all references are returned by .data('bValidators') (note the 's' here).

<%= include('pre/api-bvalidators.html'); %>

Instance names can be also set by data-bvalidator-validate attribute. Default instance name is bvalidator. Instance names are in lower case.

Function	Arguments	Description
validate	jQuery object containing inputs to validate (optional)	Invokes validation. Returns `true` if all fields are valid, or `false` if there are some validation errors.
isValid	jQuery object containing inputs to check (optional)	Only checks if inputs are valid. Doesn't show validation messages. Returns `true` if all fields are valid, or `false` if there are some validation errors.
getOptions		Returns the object with options of the current validator instance.
showMsg	jQuery object containing inputs string message (optional)	Shows a message on the elements specified with the first argument. Message can be shown on any element on the page. The element doesn't have to be a part of the form (or container element) on which bValidator is bound. If the second argument is not set, bValidator will try to get a message from `data-bvalidator-msg` attribute.
removeMsg	jQuery object containing inputs	Removes the message.
getInputs		Returns jQuery object containing all input fields associated with the validator.
getForm		Returns jQuery object containing `<form>` (or other element on which bValidator is bound).
reset	jQuery object containing inputs (optional)	Hides all validation messages and unbinds events. This function is bind to the form reset event.
destroy		Removes bValidator instance.
getValidators		Returns the object with all built-in validation functions of the current validator instance. This is useful for adding custom validator functions which are not accessible from the global scope or overriding existing built-in functions. See example. Note that the first parameter passed to the validation function is the input value or `0/1` for checkboxes and radios.
getModifiers		Returns the object with all built-in modifiers of the current validator instance. This is useful for adding custom modifying functions which are not accessible from the global scope or overriding existing built-in modifiers. You can add your modifier function like this: <%= include('pre/api-getmodifiers.html'); %>
setScrollTo	position in pixels	Sets position in pixels for scrolling after validation.
bindValidateOn	jQuery object containing inputs	This function is helpful when using `validateOn` option and dynamic forms. If you add some new input elements to the form after the validator has already been initialized and you want to validate them on the event specified by `validateOn` option, you need to call this function.

Example of using an event triggered by bValidator:

<%= include('pre/event-on.html'); %>

Event	Description
beforeFormValidation.bvalidator	Triggered before a form validation starts.
afterFormValidation.bvalidator	Triggered after a form validation is finished.
beforeFieldValidation.bvalidator	Triggered before a field validation starts.
afterFieldValidation.bvalidator	Triggered after a field validation is finished.
afterAjax.bvalidator	Triggered after Ajax request.

bValidator sets some values to the event object which you can access from within the event function:

<%= include('pre/event-function.html'); %>

Basic example

This is a basic example of using bValidator.

<%- include('examples/example.html', {file: 'basic.html'}); %>

Custom messages

You can set a validation message for the field with data-bvalidator-msg attribute:

<%- include('examples/example.html', {file: 'custom-message1.html'}); %>

A message for a specific validation function can be set with data-bvalidator-msg-functionName attribute:

<%- include('examples/example.html', {file: 'custom-message2.html'}); %>

In the previous example validateTillInvalid option is used to show a message from one validation function at the time.

Messages can also be set through options. This example shows how to set a validation message with options passed to bValidator constructor:

<%- include('examples/example.html', {file: 'custom-message3.html'}); %>

Validation function can return a message. If the validation function returns a string, it will be used as validation message. See also custom validation functions examples.

<%- include('examples/example.html', {file: 'custom-message4.html'}); %>

See more about messages here.

Custom validation function

If you want to make your own validation function, create a function that returns true for successful validation and put the function name in data-bvalidator attribute:

<%- include('examples/example.html', {file: 'custom-action1.html'}); %>

You can pass parameters to your validation function. First argument to a validation function is the value of the input field and other arguments (if any) are values stated in square brackets [] after the function name in data-bvalidator attribute.

<%- include('examples/example.html', {file: 'custom-action2.html'}); %>

To submit the next form fill in both fields or leave them empty:

<%- include('examples/example.html', {file: 'depending-inputs.html'}); %>

Password form:

<%- include('examples/example.html', {file: 'password-change.html'}); %>

If your validation function is not accessible from global scope, you can add the validation function to a validator instance by using getValidators API function:

<%= include('pre/api-getvalidators.html'); %>

Or you can add your validation function to all instances of bValidator by adding the function to bValidator.validators object:

<%= include('pre/add-validation-function.html'); %>

Big form

<%- include('examples/example.html', {file: 'big-form.html', resizeLabels: true}); %>

Checkboxes and radio buttons

<%- include('examples/example.html', {file: 'group-chk-radio.html'}); %>

Checkboxes or radio buttons are grouped by giving the same name attribute to all elements in the group. data-bvalidator and data-bvalidator-msg attributes should be added to only one element in the group on which a validation message will be shown.

Dynamic form

<%- include('examples/example.html', {file: 'dynamic-form.html'}); %>

Inputs can be added to the form after bValidator is initialized. Note that hidden form elements are not validated by default. If you need to hide or show some elements, put them into a container element and then show or hide that container. Validation messages will not follow show/hide actions if you apply them only on the input element which is validated. That also depends on the theme that is used.
If you use validateOn option, after adding a new input to the form, call bindValidateOn API function to bind validateOn event.

HTML5 form

bValidator works nicely with HTML5 input types. See enableHtml5Attr option for supported attributes. You can also use data-bvalidator attributes with HTML5 markup. See also examples for bs3form theme.

. <%- include('examples/example.html', {file: 'html5-form.html'}); %>

Validate any element

Container element doesn't have to be a <form>. You can trigger validation with JavaScript:

<%- include('examples/example.html', {file: 'validate-any1.html'}); %>

Any element can be validated like an <input>:

<%- include('examples/example.html', {file: 'validate-any2.html'}); %>

More instances

Enter letters and numbers in the field below:

<%- include('examples/example.html', {file: 'more-instances1.html'}); %>

You can have more instances of bValidator on the same form. In the example above, there are two bValidator instances on the form. One named bvalidator (name for the default instance) and another named hint . Names are stated in data-bvalidator-validate attribute. Each instance has its own options. In this example hint instance is configured not to submit the form, to use gray2 theme and to validate on keyup event. For hint instance options are set with data-hint- attributes in the same way as with data-bvalidator- attributes for the default instance.

Similar example but defined with JavaScript:

<%- include('examples/example.html', {file: 'more-instances2.html'}); %>

Just displaying messages

<%- include('examples/example.html', {file: 'just-messages.html'}); %>

In this example no validation is done, only messages are displayed. Messages can be displayed on any element on the page, it doesn't have to be an input and it doesn't have to be inside the container element on which bValidator is bound.

Forcing validation result

Sometimes after bValidator is initialized you may want to disable validation for a <form> or an <input> or you want to force them invalid. You can do it by adding data-bvalidator-return attribute with value true or false. Put the attribute on the <form> if you want to force validation result for all inputs inside the form.

<%- include('examples/example.html', {file: 'force-validation-result.html'}); %>

You can also force validation result for all fields inside the <form> with forceValidationResult option:

<%= include('pre/examples-force-validation-result.html'); %>

Modifiers

Modifiers are functions which purpose is to change the input value before validation. For example, to strip trailing/leading whitespace. Modifiers are called before validation functions. Modifying function are listed in data-bvalidator-modifier attribute by default, the same as validation functions are listed data-bvalidator attribute. For some validation functions trim modifier is called by default (see autoModifiers option).

<%- include('examples/example.html', {file: 'modifiers.html'}); %>

In this example, trim modifier is automatically called on the first field because email function is mentioned by default in autoModifiers option.
On the second field, custom modifier will delete all but digits.
The third field modifier will add 'http://' if you enter URL without it.
The fourth field has modifying function only, no validation at all. You can use only modifier on the field without data-bvalidator attribute and validation.

Note that the first argument of a modifying function is the value of the input. Other arguments (if any) are values stated in square brackets [] after the function name in data-bvalidator-modifier attribute (same as for custom validation functions). Modifying function should return a new value for the input field. If nothing (undefined) is returned, the input value will not be changed.

Server side validation

This field is validated on the server side with ajax function:

<%- include('examples/example.html', {file: 'server-side1.html', resizeLabels: true}); %>

The data-bvalidator-option-ajax-url attribute on the <form> contains URL to which the request is sent. By default, bValidator will make asynchronous HTTP (Ajax) request sending values of the inputs that are validated. If the field is valid, the response from the server should be a string defined by ajaxValid option ("ok" by default). The server can also return a JSON string with results for each validated field.

In the next example both fields are validated on the client and also on the server:

<%- include('examples/example.html', {file: 'server-side2.html', resizeLabels: true}); %>

Server validation won't be invoked if the value is invalid by some other validation function (email in this example) or if the value is not changed since the last check. JSON string returned from the server should be in format:

{"inputName1":"ok", "inputName2":"ok"}

For the fields that are valid, JSON property should have "ok" value by default. JSON properties for the fields that are not valid can have any other value or don't have to be included in the response. If all fields are valid only "ok" string can be returned from the server. Validation message for ajax function can be set by data-bvalidator-msg-ajax attribute (see more about messages).

Validator will make Ajax request only for the fields which need validation and expect response only for those fields. In this examples, all fields are always in JSON response, but that's because a static text file and not a real validation script is on the server side.

You can also return validation messages from the server. In the next example, all fields are validated on the server and all messages come from the server:

<%- include('examples/example.html', {file: 'server-side3.html', resizeLabels: true}); %>

Set ajaxResponseMsg option to true to show messages from the server response. valempty function is used here instead of required, because required will show the validation message that the field is required and skip server validation. This way the field is always validated on the server side, even if empty.

Themes define the look of validation messages. To use a theme you need to include .css and .js files for the theme.

To set the theme for all fields in the form, set the theme name with data-bvalidator-theme attribute on the <form>:

<%= include('pre/themes-attr.html'); %>

That is the same as setting useTheme option with data-bvalidator-option-use-theme attribute.

To change the theme only for the specific input field, put data-bvalidator-theme attribute on the <input>:

<%= include('pre/themes-attr-input.html'); %>

With JavaScript, you can set the default theme by changing useTheme option. For example, you can set the default theme depending on the screen width and for small-screen devices choose more adapted theme:

<%= include('pre/themes-options-size-theme.html'); %>

Theme examples and options:

Options for themes can be set by data-bvalidator-theme-optionName attribute or by JavaScript.

You can set data-bvalidator-theme-optionName attribute on the <form> element to change the option for all the fields in the form:

<%= include('pre/themes-options-form.html'); %>

If you put data-bvalidator-theme-optionName attribute on the <input>, the option will be set only for that field:

<%= include('pre/themes-options-input.html'); %>

Theme options can also be set by changing default options:

<%= include('pre/themes-options-default.html'); %>

Or by passing object with options to bValidator constructor function:

<%= include('pre/themes-options-obj.html'); %>

gray

<%- include('examples/example.html', {file: 'theme-default.html', editable: false, themeExample: true}); %>

Options for gray theme:

Option	Default	Description
offset	`"-23,-4"`	Fine tunes the message position.
showClose	`true`	If `true`, messages will have a close icon.
msgShowSpeed	`"normal"`	Message's fade-in speed. Values can be `fast`, `normal`, `slow` or number of milliseconds.
position	`"right,top"`	Zero position for the message. First value is for the horizontal position (`left`, `center`, `right`), second value is for the vertical position (`top`, `center`, `bottom`).
invalidClass	`"bvalidator-gray-invalid"`	CSS class that will be added to the field if invalid.
validClass	`""`	CSS class that will be added to the field if valid.
template	`"<div class="bvalidator-gray-tooltip bvalidator-gray-tooltip-noclose"><div class="bvalidator-gray-arrow"></div><div class="bvalidator-gray-msg">{message}</div></div>"`	Template for the message without the close icon.
templateClose	`"<div class="bvalidator-gray-tooltip"><div class="bvalidator-gray-arrow"></div><div class="bvalidator-gray-msg">{message}</div><div class="bvalidator-gray-close">×</div></div>"`	Template for the message with the close icon.

Files to include for gray theme:

<%= include('pre/theme-gray-include.html'); %>

bs3form

This theme uses Bootstrap's form validation styles and is designed for pages built with Bootstrap 3. For this theme to work correctly you have to make forms with Bootstrap markup. It is important to place form-group and control-label classes correctly. See Bootstrap documentation for details.

<%- include('examples/example.html', {file: 'theme-bs3form.html', editable: false, brInput: false, bdocsExampleHtml: false}); %>

With horizontal forms use the helper class bvalidator-bs3form-msg to mark the element into which to append the validation message. By default, the message is appended to form-group element.

<%- include('examples/example.html', {file: 'theme-bs3form-horizontal.html', editable: false, brInput: false, bdocsExampleHtml: false}); %>

Next example is Inline form. showMessages option is set to false to not show the messages:

<%- include('examples/example.html', {file: 'theme-bs3form-inline.html', editable: false, brInput: false, bdocsExampleHtml: false}); %>

Options for bs3form theme:

Option	Default	Description
template	`"<div class="help-block">{message}</div>"`	Template for a validation message. If `showMessages` option is set to `false` you can change the template to use `sr-only` class for assistive technologies.
formGroupInvalidClass	`"has-error"`	CSS class that will be added to the `formGroup` element if invalid.
formGroupValidClass	`""`	CSS class that will be added to the `formGroup` element if valid. `has-success` is a default Bootstrap class for this.
showMessages	`true`	If `true` messages will be shown.
formGroup	`".form-group"`	jQuery selector for the element with `form-group` class. If it doesn't start with `#`, search with jQuery's `.closest()` is used.
msgParent	`".bvalidator-bs3form-msg"`	jQuery selector for the element to append a validation message into. If it doesn't start with `#`, search with jQuery's `.closest()` is used.

Files to include for bs3form theme:

<%= include('pre/theme-bs3form-include.html'); %>

bs3popover

This theme uses Bootstrap Popover plugin to show messages. You have to include bootstrap js and css for this theme to work.

<%- include('examples/example.html', {file: 'theme-bs3popover.html', brInput: false, editable: false, themeExample: true}); %>

Options for bs3popover theme:

Option	Default	Description
placement	`"right"`	How to position the popover. `top` \| `bottom` \| `left` \| `right` \| `auto`.
showClose	`true`	If `true`, popover will have the close icon.
content	`"<div class="bvalidator-bs3popover-msg bvalidator-bs3popover-msg-noclose">{message}</div>"`	Template for the popover content without the close icon.
contentClose	`"<div class="bvalidator-bs3popover-msg">{message}</div><div class="bvalidator-bs3popover-close"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div>"`	Template for the popover content with the close icon.
tooltipOptions	`{ html: 'true', template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>', viewport: null, trigger: 'manual' }`	Popover options. See Bootstrap documentation for all options.

Files to include for bs3popover theme:

<%= include('pre/theme-bs3popover-include.html'); %>

bs3tooltip

This theme is similar to bs3popover theme but it uses Tooltip plugin to display messages. You have to include bootstrap js and css for this theme to work.

<%- include('examples/example.html', {file: 'theme-bs3tooltip.html', brInput: false, editable: false, themeExample: true}); %>

Options for bs3tooltip theme:

Option	Default	Description
placement	`"right"`	How to position the tooltip. `top` \| `bottom` \| `left` \| `right` \| `auto`.
showClose	`true`	If `true`, tooltip will have the close icon.
content	`"<div class="bvalidator-bs3tooltip-msg bvalidator-bs3tooltip-msg-noclose">{message}</div>"`	Template for the tooltip content without the close icon.
contentClose	`"<div class="bvalidator-bs3tooltip-msg">{message}</div><div class="bvalidator-bs3tooltip-close"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div>"`	Template for the tooltip content with the close icon.
tooltipOptions	`{ html: 'true', viewport: null, trigger: 'manual', sanitize : false }`	Tooltip options. See Bootstrap documentation for all options.

Files to include for bs3tooltip theme:

<%= include('pre/theme-bs3tooltip-include.html'); %>

insert

This is a simple theme which just inserts a message before or after the input which is checked.

<%- include('examples/example.html', {file: 'theme-insert.html', editable: false, themeExample: true}); %>

You can easily change message styles or template by setting options:

<%- include('examples/example.html', {file: 'theme-insert1.html', editable: false, themeExample: true}); %>

Options for insert theme:

Option	Default	Description
placement	`"after"`	Where to put a message, `after` or `before`.
invalidClass	`"bvalidator-insert-invalid"`	CSS class that will be added to the field if invalid.
validClass	`""`	CSS class that will be added to the field if valid.
msgClass	`"bvalidator-insert-msg"`	This value will replace `{msgClass}` in `template` option.
template	`"<div class="{msgClass}">{message}</div>"`	Template for a validation message.

Files to include for insert theme:

<%= include('pre/theme-insert-include.html'); %>

group

This theme puts all validation messages into one container.

<%- include('examples/example.html', {file: 'theme-group.html', editable: false, themeExample: true}); %>

Options for group theme:

Option	Default	Description
msgClass	`"bvalidator-group-msg"`	CSS class for validation messages container.
invalidClass	`"bvalidator-group-invalid"`	CSS class that will be added to the field if invalid.
validClass	`""`	CSS class that will be added to the field if valid.
makeMsgContainer	`null`	Function that returns the element into which all messages will be prepend. It is called with two arguments: `$form` and `$input`. If `null`, messages are prepend into the `<form>`.

Files to include for group theme:

<%= include('pre/theme-group-include.html'); %>

gray2

<%- include('examples/example.html', {file: 'theme-gray2.html', editable: false, themeExample: true}); %>