In my new post I going to share lightweight jquery plugin to add Quick client side Validation on your bootstrap form. Validator.js is a cool lightweight jQuery validation plugin for Bootstrap that shows error messages for invalid form fields before submitting and helps to prevent submission of wrong inputs data. You can easily customize error messages with your own custom messages.
Integrate Bootstrap Form Validation Plugin
Follow below steps to add validation on your bootstrap form.
Libraries
Add bootstrap library after that add validator.js on page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//code.jquery.com/jquery-latest.min.js">script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script> <script src="validator.js">script> |
HTML
For demo purpose created sample HTML form with almost all the input types.
JS
Finally Initialize the plugin and apply the validation rules to the form fields, You can also put your own custom messages.
<script> $(function() { 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' } } ], submitOnValid: false, showErrorMessage: true, errorMessageText: "Set Your Custom Error Message", errorGroupClass: "has-error has-feedback", successGroupClass: "has-success has-feedback" }); $('#form') .on('is-valid', function (e) { console.log('valid'); }) .on('is-invalid', function (e) { console.log('invalid'); }); }); script> |
See live demo and download source code.
Validation Rules
| Pattern | Explanation |
|---|---|
| required | any word characters |
| any valid e-mail address | |
| date | valid date formats: YYYY-MM-DD or MM.DD.YYYY or MM DD YYYY IMPORTANT: only checks if the format is valid |
| minLength:X | value must be at least X characters long |
| maxLength:X | value cannot be longer than X characters |
| regex:X | regex check for value |
| checked | check if checkbox / radio is checked |
See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.