bootstrap-validate

v2.2.6

A simple Form Validation Utility for Bootstrap 3 and Bootstrap 4 not depending on jQuery.

Download v1 for Bootstrap 3Download v2 (latest) for Bootstrap 4Star on GitHub

Rules

Bootstrap Validate currently ships the following rules. Below you will find a description of every rule, its very own options and a usage example.

Are you missing a rule to validate your Bootstrap Forms?

We can surely help you on that one! Also, adding rules is super easy.

But before you need to get your hands dirty, file an Issue to get your rule added!

Issue

min 1.0.0

Require a given minimum character count.

Options

Available Options: 1

  • number: Number of minimum characters.

Usage

bootstrapValidate('#input', 'min:20:Enter at least 20 characters!')

Source

function min(input, _min) {
    return (
      /**
       * @since 1.0.0
       * @example 20
       * @error Enter at least 20 characters!
       * @param min number: Number of minimum characters.
       * @description Require a given minimum character count.
       */
      (0, _gte2.default)(input.value.length, (0, _parseInt2.default)(_min))
    );
  }

max 1.0.0

Maximum character count required.

Options

Available Options: 1

  • number: Number of maximum characters.

Usage

bootstrapValidate('#input', 'max:42:Please dont enter more than 42 characters!')

Source

function max(input, _max) {
    return (
      /**
       * @since 1.0.0
       * @example 42
       * @error Please dont enter more than 42 characters!
       * @param max number: Number of maximum characters.
       * @description Maximum character count required.
       */
      (0, _lte2.default)(input.value.length, (0, _parseInt2.default)(_max))
    );
  }

email 1.0.3

Require a valid E-Mail Address.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'email:Enter a valid email address')

Source

function email(input) {
    return (
      /**
       * @since 1.0.3
       * @error Enter a valid email address
       * @description Require a valid E-Mail Address.
       */
      new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(input.value)
    );
  }

required 1.0.7

Require a field to be filled out.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'required:Please fill out this field!')

Source

function required(input) {
    return (
      /**
       * @since 1.0.7
       * @error Please fill out this field!
       * @description Require a field to be filled out.
       */
      input.value.length && input.value.length > 0
    );
  }

url 1.0.10

Require a valid URL.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'url:Please enter a valid URL!')

Source

function url(input) {
    return (
      /**
       * @since 1.0.10
       * @error Please enter a valid URL!
       * @description Require a valid URL.
       */
      new RegExp(/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i).test(input.value)
    );
  }

integer 1.0.10

Require a valid integer.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'integer:Please fill out this input field!')

Source

function integer(input) {
    return (
      /**
       * @since 1.0.10
       * @error Please fill out this input field!
       * @description Require a valid integer.
       */
      (0, _isInteger2.default)(Number(input.value))
    );
  }

numeric 1.0.10

Require a valid numeric input.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'numeric:Please only enter numeric characters!')

Source

function numeric(input) {
    return (
      /**
       * @since 1.0.10
       * @description Require a valid numeric input.
       * @error Please only enter numeric characters!
       */
      (0, _isFinite2.default)(Number(input.value))
    );
  }

alphanum 1.0.10

Require alphanumeric input, e.g. 0-9 and a-Z.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'alphanum:Please only enter alphanumeric characters!')

Source

function alphanum(input) {
    return (
      /**
       * @since 1.0.10
       * @error Please only enter alphanumeric characters!
       * @description Require alphanumeric input, e.g. 0-9 and a-Z.
       */
      new RegExp(/^[a-z0-9]+$/i).test(input.value)
    );
  }

ISO8601 v2.1.0

Validate user input against ISO 8601 Format.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'ISO8601:Your input does not match the wanted format YYYY-MM-DD')

Source

function ISO8601(input) {
    return (
      /**
       * @since v2.1.0
       * @error Your input does not match the wanted format YYYY-MM-DD
       * @description Validate user input against ISO 8601 Format.
       */
      new RegExp(/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])$/).test(input.value)
    );
  }

regex v2.1.0

Test a Regular Expression against an input value

Options

Available Options: 1

  • regex: Regex to validate

Usage

bootstrapValidate('#input', 'regex:^[a-z]+$:Please fulfill my regex')

Source

function regex(input, _regex) {
    return (
      /**
       * @since v2.1.0
       * @example ^[a-z]+$
       * @param regex regex: Regex to validate
       * @error Please fulfill my regex
       * @description Test a Regular Expression against an input value
       */
      new RegExp(_regex).test(input.value)
    );
  }

divisible v2.1.0

Test if input number can be divided by given number and the result is an exact whole number.

Options

Available Options: 1

  • Number: Number to Test

Usage

bootstrapValidate('#input', 'divisible:15:15 is not divisible by 4.')

Source

function divisible(input, number) {
    /**
     * @since v2.1.0
     * @example 15
     * @param number Number: Number to Test
     * @error 15 is not divisible by 4.
     * @description Test if input number can be divided by given number and the result is an exact whole number.
     */
    var lDivisible = false;
    var lNumber = Number(input.value);
    if ((0, _isFinite2.default)(lNumber)) {
      lDivisible = new _big2.default(lNumber).mod(new _big2.default(Number(number))).toString() === "0";
    }

    return lDivisible;
  }

contains 1.0.11

Require the input to contain a given string.

Options

Available Options: 1

  • string: String to appear in the Input Element

Usage

bootstrapValidate('#input', 'contains:something:Your text needs to contain something!')

Source

function contains(input, string) {
    return (
      /**
       * @since 1.0.11
       * @param string string: String to appear in the Input Element
       * @description Require the input to contain a given string.
       * @example something
       * @error Your text needs to contain something!
       */
      input.value.indexOf(string) !== -1
    );
  }

startsWith 1.1.0

Require the input value to start with a given string.

Options

Available Options: 1

  • string: String the input value should start with

Usage

bootstrapValidate('#input', 'startsWith:+49:Your phone number needs to start with +49')

Source

function startsWith(input, string) {
    return (
      /**
       * @since 1.1.0
       * @param string string: String the input value should start with
       * @example +49
       * @error Your phone number needs to start with +49
       * @description Require the input value to start with a given string.
       */
      (0, _startsWith3.default)(input.value, string)
    );
  }

endsWith 1.1.0

Require the input value to end with a given string.

Options

Available Options: 1

  • string: String the input value should end with

Usage

bootstrapValidate('#input', 'endsWith:UCV:Your Input needs to end with UCV')

Source

function endsWith(input, string) {
    return (
      /**
       * @since 1.1.0
       * @example UCV
       * @error Your Input needs to end with UCV
       * @param string string: String the input value should end with
       * @description Require the input value to end with a given string.
       */
      (0, _endsWith3.default)(input.value, string)
    );
  }

matches 1.1.0

Require the input value to match the given inputs value. Like bootstrapValidate's first Parameter, you can pass a selector or Element.

Options

Available Options: 1

  • string: The input element to match against

Usage

bootstrapValidate('#input', 'matches:#passwordConfirm:Your passwords should match')

Source

function matches(input, matchingInput) {
    /**
     * @since 1.1.0
     * @example #passwordConfirm
     * @error Your passwords should match
     * @param matchingInput string: The input element to match against
     * @description Require the input value to match the given inputs value. Like bootstrapValidate's first Parameter, you can pass a selector or Element.
     */
    var lMatchingInput = matchingInput;

    if (typeof lMatchingInput.nodeType === "undefined") {
      lMatchingInput = document.querySelector(matchingInput);
    }

    return input.value === lMatchingInput.value;
  }

alpha 1.1.0

Validate only alphabetic characters - a-z, A-Z.

Options

Available Options: 0

You only need to pass an Error Text.

Usage

bootstrapValidate('#input', 'alpha:You can only input alphabetic characters')

Source

function alpha(input) {
    return (
      /**
       * @since 1.1.0
       * @error You can only input alphabetic characters
       * @description Validate only alphabetic characters - a-z, A-Z.
       */
      (0, _isString2.default)(input.value) && new RegExp(/^[a-z]+$/i).test(input.value)
    );
  }

inArray New 2.2.0

Validate if user input is in given array. Similar to contains, but with an array.

Options

Available Options: 1

  • string: Array String (abc, def, ghi)

Usage

bootstrapValidate('#input', 'inArray:(ABC, DEF, GHI):Your input must be any of (ABC, DEF, GHI)')

Source

function inArray(input, string) {
    /**
     * @since 2.2.0
     * @example (ABC, DEF, GHI)
     * @param string string: Array String (abc, def, ghi)
     * @error Your input must be any of (ABC, DEF, GHI)
     * @description Validate if user input is in given array. Similar to contains, but with an array.
     */
    var value = (0, _trim2.default)(input.value);
    var array = (0, _split2.default)((0, _trim2.default)(string, "whitespace()"), ",");
    return array.indexOf(value) !== -1;
  }
← UsageAvailable Rules →