Bootstrap Form Validation Library Without jQuery – Native Validator

Category: Form , Javascript | February 19, 2021
Views Total:3,711 views
Official Page:Go to website
Last Update:February 19, 2021


Bootstrap Form Validation Library Without jQuery – Native Validator


Native Validator is a vanilla JavaScript-powered form validation library for the latest bootstrap framework, without jQuery dependency.

How to use it:

1. Load the Bootstrap’s stylesheet and Native Validator’s JavaScript in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/dist/validator.min.js"></script>

2. Initialize the Native Validator on your HTML form.

var validator = new Validator(document.querySelector("form"), {
    // options here

3. The library comes with 2 built-in validation rules:

  • email: Valid email address
  • match: Checks if two values are the same
<label for="input-email" class="control-label">Email</label>
<input type="email" name="email" class="form-control" id="input-email" placeholder="Email" required data-email data-email-error="Bruh, that email address is invalid." />
<div class="invalid-feedback"></div>
<label for="input-password">Password</label>
<input type="password" name="password" class="form-control" id="input-password" placeholder="Password" required />
<div class="invalid-feedback"></div>
<label for="input-password_confirm">Confirm Password</label>
<input type="password" name="password_confirm" class="form-control" id="input-password_confirm" placeholder="Confirm" required data-match="#input-password" data-match-error="Whoops, these don't match" />

4. Register new rules as plugins:

Validator.plugin("numberonly", {
  install() {
    console.log('plugin installed');
  validate(el, attribute) {
    return /^\d+$/.test(el.value);
<label for="input-phone" class="control-label">Phone</label>
<input type="text" name="phone" class="form-control" id="input-phone" placeholder="Phone" data-numberonly required data-numberonly-error="Only accept number." />
<div class="invalid-feedback"></div>

5. Determine whether to automatically scroll the page to the first invalid field. Default: true.

var validator = new Validator(document.querySelector("form"), {
    autoScroll: false,
    offsetFocus: 50

6. Determine whether to show valid messages. Default: true.

var validator = new Validator(document.querySelector("form"), {
    showValid: false

7. Specify the time to wait before validating the field on blur. Default: 500(ms).

var validator = new Validator(document.querySelector("form"), {
    delay: 200

You Might Be Interested In:

One thought on “Bootstrap Form Validation Library Without jQuery – Native Validator

  1. Martin

    Doesn’t the script run with PHP seven? If I save the file as HTML, the script works, if I save the file, i.e. the form, as PHP, the script does not work!


Leave a Reply