A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

  • By Pascale Beier
  • Last update: Jan 2, 2023
  • Comments: 16

bootstrap-validate

GitHub Workflow Status Lint GitHub Workflow Status Lint GitHub release (latest SemVer) npm GitHub

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

Demo

🎉 Support us with Developer Merchandise

Check out stickers, apparel and accessoires for devs on https://devsfordevs.shop.

Supported Versions

bootstrap-validate Version Bootstrap Version Documentation
v1 Bootstrap 3 v1 Download + Docs
v2 Bootstrap 4 v2 Download + Docs
v3 (Upcoming) Bootstrap 5, Bootstrap 4? v3 Download + Docs

Documentation

Read the Documentation at bootstrap-validate.js.org.

Quick Start

$ npm i bootstrap-validate

Include the bootstrap-validate.js script:

"> 
<script defer="defer" src="bootstrap-validate.js">script>

We want the #name to be not longer than 30 characters!

"> 
<div class="form-group">
    <label class="control-label">Enter a Namelabel>
    <input id="name">
div>

<script>
bootstrapValidate('#name', 'max:30:Your name must not be longer than 30 characters');
script>

Validating an #email address couldn't be easier!

"> 
<div class="form-group">
  <label for="email" class="control-label">Enter your E-Maillabel>
  <div class="input" id="email">
div>

<script>
bootstrapValidate('#email', 'email:Enter a valid email address');
script>

More Features!

See the v2 Documentation on https://bootstrap-validate.js.org/v2/ to see all available validation features, examples, and usage with module bundlers.

Examples

See examples/ for real-world usage.

Download

You can find current Releases under Releases and older Releases for Bootstrap 3 and Bootstrap 4 in the Download Archive.

Changelog

See CHANGELOG.

Tests

Validation Rules are at least unit-tested. Use npm test to spin up the test suites.

License

Licensed under the MIT License, see LICENSE.

Github

https://github.com/PascaleBeier/bootstrap-validate

Comments(16)

  • 1

    Rule Wishlist

    • [ ] before(date, dateFormat)
    • [ ] after (date, dateFormat)
    • [ ] date(format)
    • [x] regexp(regexp)
    • [ ] phone (format)
    • [ ] file(extension)
    • [x] divisible (https://github.com/PascaleBeier/bootstrap-validate/issues/9#issuecomment-384778411)
    • [x] url URL Validation
    • [x] matches Two fields that should match, e.q. for password confirmations. The v1 API makes that super fuzzy.
    • [x] endswith(string) Ensure a given string ends with a given string
    • [x] startswith(string) Same as above but starting with
    • [x] contains(string)
  • 2

    Custom validation function

    A powerful tool would be to enhance the interface with the ability to link the validation to a custom callback function where a user could implement a more advanced validation algorithm.

    I stumbled upon a situation where I need to validate Australian Business Number (ABN) (https://abr.business.gov.au/Help/AbnFormat), most other country-specific numbers I can validate with the regex or other built-in rules of bootstrap.js, but now at a dead end when I needed to add support for ABN.

  • 3

    Multiple rules of the same type

    Putting in multiple rules of the same type leads to only the last one being evaluated.

    Example for replication:

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body>

<div class="form-group">
        <label class="control-label">Enter a Name</label>
        <input id="name" />
</div>
<script src="assets/bootstrap-validate/dist/bootstrap-validate.js"></script>
<script>
        bootstrapValidate('#name', 'regex:[a-z]:Must have lowercase|regex:[A-Z]:must have uppercase');
    </script>
</body>
  • 4

    Regex Rule cannot handle all Expressions

    Because of how this library handles regex (as a string, that is), not all regular expressions work.

    Keep in mind that you leave out the Quanitifiers "/" "/g" etc and check your own regexes for JavaScript at regex101.

  • 5

    Regex File Type

    Doesn't work
    Rule I apply : "regex:(xlsx|png)+$:Please upload xlsx file !" Uncaught TypeError: Cannot read property 'apply' of undefined

    This work Rule I apply : "regex:(xlsx)+$:Please upload xlsx file !"

    Any solution ?

  • 6

    Finalize Docs

    • [x] Get some time on writing the docs :)
    • [x] Add Info for ES6 Environments
    • [ ] Add Info on how to Contribute
    • [ ] Add Code snippets
    • [ ] Add more usage examples; ideally of every rule and real world examples
  • 7

    NPM module updated?

    I notice when pulling in bootstrap-validate using yarn add bootstrap-validate I get version 2.1.3 but as per documentation, latest version seems to be: 2.2.0

      <script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js" ></script>
  • 8

    Change to 'is-valid' class

    Hello, after validation it would be perfect to change the input class from: is-invalid to is-valid. This would stylize the input border color from red to green. At the moment it just removes the is-invalid, which utter in a red border-color changing to default input border. Thanks, malmr

  • 9

    empty input & RegExp based rules

    When using a RegExp based input (tested with alphanum and ISO8601) an empty input is not allowed if something was filled in.

    So when you fill in the field with wrong input, the invalid state is triggered. But when you clear the input, the invalid state is not removed.

    Stef

  • 10

    Cant import `bootstrapValidate` function using ES6/Webpack

    I got this error Uncaught TypeError:__WEBPACK_IMPORTED_MODULE_2_bootstrap_validate__ is not a function via code below

    import * as bootstrapValidate from 'bootstrap-validate'

bootstrapValidate('#test', 'required')

    ps: this is obviously wrong syntax import * from 'bootstrap-validate' as bootstrapValidate; https://bootstrap-validate.js.org/installation.html

  • 11

    Form Can Still Submit

    I have a form to reset a password. I amusing the following two rules:

    `

    `

    The rules are working - BUT you can still SUBMIT the form if they are showing as invalid. Defeats the purpose of the validation.

    Using latest version: 2.2.0.

    Form:

    <form action="reset_password.php" method="POST"> <div class="py-3"> <div class="form-group"> <input type="password" class="form-control form-control-alt form-control-lg" id="password" name="password" placeholder="Password" required> </div> <div class="form-group"> <input type="password" class="form-control form-control-alt form-control-lg" id="password2" name="password2" placeholder="Confirm Password" required> <small class="form-text text-muted">Your password MUST contain: at least 1 lowercase alphabetical character, at least 1 uppercase alphabetical character, at least 1 numeric character, and be eight characters or longer.</small> </div> </div> <div class="form-group row"> <div class="col-md-6 col-xl-5"> <button type="submit" class="btn btn-block btn-alt-primary"> <i class="si si-fw si-reload mr-1"></i> Reset </button> </div> </div> </form> What am I doing wrong? What do I need to do to only allow submission if the rules are met?

  • 12

    Facing Error bootstrap-validate.js:

    Following is the error that I see in browser when I try using bootstrap-validate: bootstrap-validate.js:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at bootstrap-validate.js:1:16851 at Array.forEach () at M (bootstrap-validate.js:1:16787) at 7:176:13

  • 13

    regx dose not support \d

    Hi there.

    bootstrapValidate('.mobile', 'regex:^1\d{10}$:Mobile Err' is not working. I have to code like this: bootstrapValidate('.mobile', 'regex:^1[0-9]{10}$:Mobile Err'

  • 14

    Regex Validation Issue - Pipe operator "|" is used as rule separator

    Hello, I am having an issue with using Bootstrap Validate for my regex. I must be able to use the pipe operator as part of my regex syntax. Can you please show any alternative to achieve the following:

    regex:([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-5][0-9])\s*([AaPp][Mm]):Please enter a valid time

    I want to be able to validate text that says "10:30 am" or "9:00am"

    Because of the pipe operator. "|" is used as rule separator.

    Originally posted by @PascaleBeier in https://github.com/bootstrap-validate/bootstrap-validate/issues/50#issuecomment-516749943

  • 15

    Does not work with Bootstrap 5

    Code bootstrapValidate('#companyName', 'required:Please enter a company name.');

    HTML <input type='text' class='form-control id='companyName' name='companyName' required>

  • 16

    Does not support Select2

    I have simple code below and still doesn't support validation.

    <select class="form-control select2" id="group" required>
  <option value=""></option>
  <option value="1">One</option>
</select>

    <script>
  $('.select2').select2();
  bootstrapValidate("#group", "required:This is required!");
</script>

    But it worked on input tag. Any idea?

Popular Tag

Related