A Basic jQuery Validation Engine For Bootstrap Forms - Validator.js

Validator.js is a lightweight jQuery validation plugin for Bootstrap that creates and displays error messages for invalid form fields before submitting. Supports both Bootstrap 3 and Bootstrap 4.

Validation rules included:

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

Basic usage:

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 error messages) to the form fields as follows:

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: 'date',
                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');
  });

---

This awesome jQuery plugin is developed by timof1996. For more Advanced Usages, please check the demo page or visit the official website.