Validation For Bootstrap In jQuery – Validator.js

File Size:6.8 KB
Views Total:683
Last Update:March 14, 2018
Publish Date:December 26, 2017
Official Website:Go to website
License:MIT

A lightweight jQuery validation plugin for the kind of the Bootstrap which helps people to create and display the error messages for mainly the work of the internet of the invalid form fields that helps before the submission is known as Validator.js. VAlidator.js. supports both Bootstrap 3 and bootstrap 4.

The rules for the validation includes:

  • Requirement.
  • Email ID.
  • Date and time.
  • Min/max length.
  • Check/uncheck.
  • Regex.

How to use :

1. Include jQuery library, Bootstrap’s style sheet and the jQuery Validator.js script on the web page.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="validator.js"></script>

2. Initialize the plugin and apply the validation rules with custom :

new Validation('#form', {
    fields: [
        {
            name: 'text1',
            rule: {
                type: 'required',
                prompt: 'Please type in any value'
            }
        }, {
            name: 'text2',
            rule: {
                type: 'email',
                prompt: 'Please enter a valid email address'
            }
        }, {
            name: 'text3',
            rule: {
                type: 'minLength:5',
                prompt: 'Enter at least 5 characters'
            }
        }, {
            name: 'text4',
            rule: {
                type: 'maxLength:5',
                prompt: 'You cannot enter more than 5 characters'
            }
        }, {
            name: 'text5',
            rule: {
                type: 'regex:^test5$',
                prompt: 'This field does not match the regular expression'
            }
        }, {
            name: 'text6',
            rule: {
                type: 'required',
                prompt: 'Field6 is disabled'
            }
        }, {
            name: 'text7',
            rule: {
                type: 'checked',
                prompt: 'Any checkbox needs to be checked'
            }
        }, {
            name: 'text8',
            rule: {
                type: 'checked',
                prompt: 'One radio needs to be checked'
            }
        }, {
            name: 'text9',
            rule: {
                type: 'required',
                prompt: 'Select one field'
            }
        }, {
            name: 'text10',
            rule: {
                type: '<a href="https://www.jqueryshare.net/time-clock/">date</a>',
                prompt: 'Please enter a valid date format'
            }
        }
    ]
});

3. Default configuration options.

new Validation('#form', {
    fields: [],
    submitOnValid: false,
    errorMessageText: "Custom Error Message", 
    errorGroupClass: "has-error has-feedback", 
    successGroupClass: "has-success has-feedback"
});

4. Event handlers :

$('#form')
  .on('is-valid', function (e) {
      console.log('valid');
  })
  .on('is-invalid', function (e) {
      console.log('invalid');
  });

Done 🙂