<% if (dev) { %> <% } else { %> <% } %>

bValidator

bValidator is a form validation jQuery plug-in.

It supports themes for validation messages, various validation functions, validation of dynamic forms, server side validation and more (see examples).

This page contains documentation for version 1.x, if you are looking for an older version click here.

Setup

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.

Options

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.

Messages and translations

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 and modifying functions

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
  1. 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
  1. minimum value
  2. 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
  1. 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
  1. 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
  1. minimum length
  2. maximum length
Checks if length of the value is between values of function parameters. Example: rangelen[5:20]
maxlen
  1. maximum length
Checks if length of the value is smaller than the function parameter value. Example: maxlen[20]
minlen
  1. minimum length
Checks if length of the value is greater than the function parameter value. Example: minlen[5]
extension
  1. 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
  1. element ID
Input value has to be different from the value of the field whose ID is passed as parameter. Example: equal[myElementId]
equal
  1. element ID
Input value has to be equal to the value of the field whose ID is passed as parameter. Example: differ[myElementId]
pattern
  1. pattern
  2. 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).

API functions

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
  1. 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
  1. 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
  1. jQuery object containing inputs
  2. 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
  1. 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
  1. 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
  1. position in pixels
Sets position in pixels for scrolling after validation.
bindValidateOn
  1. 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.

Events

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'); %>

Examples

You can change the source code and play with each example by clicking on the 'Source' button. This page includes default Bootstrap 3 CSS and JavaScript. Note that some Bootstrap styles in the examples are modified for a simple HTML markup, so if you paste a form with Bootstrap HTML it will not look like you would expect. Click on the 'No styling' bellow the editor to disable customized styling and leave only default Bootstrap styles.

You can change the look of the validation messages in the examples by choosing the theme name from the useTheme dropdown in the main menu.

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

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">&#215;</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">&times;</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">&times;</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}); %>

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for gray2 theme:

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

gray3

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

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for gray3 theme:

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

gray4

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

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for gray4 theme:

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

orange

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

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for orange theme:

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

postit

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

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for postit theme:

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

red

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

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for red theme:

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

bslikerc

This theme looks like Bootstrap popover with right placement, but it doesn't depend on Bootstrap as bs3popover theme does.

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

This theme has the same options as the gray theme, see the theme .js file for default values.

Files to include for bslikerc theme:

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

bslikert

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

This theme looks similar to Bootstrap popover, but it doesn't depend on Bootstrap as bs3popover theme does and has the same options as the gray theme. See the theme .js file for default options values.

Files to include for bslikert theme:

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

Licence

bValidator is licensed under MIT license so it is free and you can use it without restrictions.

If you use bValidator, please consider making a donation

 

If you like it, please share

<% if (shareIcons) { %>
Star

<% } %>
<% if (shareIcons) { %> <% } %>