A Basic jQuery Validation Engine For Bootstrap Forms - Validator.js
File Size: | 7.81 KB |
---|---|
Views Total: | 3152 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.