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

Overview

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 Name</label>
    <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-Mail</label>
  <input 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.

Comments
  • Rule Wishlist

    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)
    opened by PascaleBeier 20
  • Custom validation function

    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.

    opened by aksamit 7
  • Multiple rules of the same type

    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>
    
    opened by sternj 6
  • Regex Rule cannot handle all Expressions

    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.

    opened by PascaleBeier 4
  • Regex File Type

    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 ?

    opened by Joshong1991 4
  • Finalize Docs

    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
    opened by PascaleBeier 4
  • NPM module updated?

    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>
    
    opened by simplenotezy 3
  • Change to 'is-valid' class

    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

    opened by malmr 3
  • empty input & RegExp based rules

    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

    opened by StefCoene 3
  • Cant import `bootstrapValidate` function using ES6/Webpack

    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

    opened by babakgh 3
  • Form Can Still Submit

    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?

    opened by lapepper 2
  • Facing Error bootstrap-validate.js:

    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

    opened by sanjivsharmalv 0
  • regx dose not support \d

    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'

    opened by aszx0413 0
  • Regex Validation Issue - Pipe operator

    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

    opened by dominicklee 1
  • Does not work with Bootstrap 5

    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>

    opened by OfficialAudite 0
  • Does not support Select2

    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?

    bug 
    opened by ridintek 3
Releases(v2.2.5)
An accessible dialog window library for all humans.

Version 0.4.4 Requires jQuery 1.11.2 or higher (v2 not tested, v3 works but not extensively stress tested). Built by Humaan Modaal Modaal is a WCAG 2.

Humaan 2.7k Dec 26, 2022
Simple and lightweight form validation for Svelte with no dependencies.

Svelidate Simple and lightweight form validation for Svelte with no dependencies Installation // npm npm install svelidate // yarn yarn add svelidate

null 28 Dec 28, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be displayed. Try it!

RenderIf RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be disp

Oscar Cornejo Aguila 6 Jul 12, 2022
A utility for creating toggleable items with JavaScript. Inspired by bootstrap's toggle utility. Implemented in vanillaJS in a functional style.

LUX TOGGLE Demo: https://jesschampion.github.io/lux-toggle/ A utility for creating toggleable dom elements with JavaScript. Inspired by bootstrap's to

Jess Champion 2 Oct 3, 2020
The jQuery plugin for validation and post form data to server

NiceForm The jQuery plugin for validation and post form data to server (http://ducdhm.github.io/jquery.niceform/) Shortcuts Dependencies Rules Configu

Duc Doan (Bobby) 17 Jul 27, 2022
A robust form library for Lit that enriches input components with easy-to-use data validation features.

EliteForms A robust form library for Lit that enriches input components with easy-to-use data validation features. Installation npm install elite-form

OSLabs Beta 33 Jun 28, 2022
Javascript Library providing form validation helpers

Javascript-Form-Validation Javascript Library providing form validation helpers Table of contents Installation Usage Include Library Use components Co

Benoit Gambier 13 Mar 25, 2022
Composition API & Yup Powered Form Validation

vue-yup-form Composition API & Yup Powered Form Validation. This tiny library allows Vue and Yup to be a best friend. Requirements The following versi

Masaki Koyanagi 12 Dec 26, 2022
This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Kanshi TANAIKE 18 Oct 23, 2022
Auth-Form-Design - Beautiful Auth Form Designed using React 🥰.

?? Auth Form Design ?? Features 1. Check Your Password Strength 2. Can Use Suggested Password 3. Enjoy Responsive Design Getting Started with Create R

Samarpan Dasgupta 2 Dec 24, 2022
Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Bart 1 Jan 2, 2022
Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Gino 4 Sep 26, 2021
A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

appleple 159 Dec 10, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
đź”– A drag-and-drop form builder for Bootstrap 4.

Bootstrap v4 Form Builder A drag-and-drop form builder for Bootstrap 4. âť“ Get Help There are few ways to get help: Please post questions on Stack Over

Bloggify 107 Dec 22, 2022
Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

jquery.picky.js Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags. Features Instead of g

Patrick Crowley 5 Apr 25, 2021