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
});

The post Bootstrap Form Validation Library Without jQuery – Native Validator appeared first on CSS Script.