HTML5 Form Validation Plugin For Bootstrap - Bootstrap Validator
File Size: | 186 KB |
---|---|
Views Total: | 40481 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Bootstrap Validator is a great alternative to the jQuery Form Validation plugin since it's not available for free download. The plugin makes uses of jQuery and HTML5 attributes to provide flexible, customizable and AJAX-enabled validation functionalities for your Bootstrap forms.
Basic usage:
1. Add the minified version of the Bootstrap Validator plugin to your Bootstrap project. Make sure the validator.min.js
script after jQuery library.
<!-- Bootstrap core CSS --> <link href="/path/to/bootstrap.min.css" rel="stylesheet"> <!-- JS files --> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <script src="/path/to/validator.min.js"></script>
2. Add built-in and custom validation rules to matched form fields using both standard HTML5 form attributes and non-standard data
attributes as follows:
- type="email": The value must be a valid email address
- type="url": The value must be an absolute URL
- type="number": The value must be a valid number, with additional constraints via max, min and step attributes
- pattern="...": custom pattern using REGX
- required: Required field
- data-match="#password": Great for password fields
- data-minlength="5": Minimum number of characters
- data-remote="/path/to/remote/validator": Validate the form field via AJAX
- data-error: custom error messages
<form role="form" data-toggle="validator"> <div class="form-group"> <label for="inputName" class="control-label">Name</label> <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required> </div> <div class="form-group"> <label for="inputEmail" class="control-label">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required> <div class="help-block with-errors"></div> </div> <div class="form-group"> <label for="inputPassword" class="control-label">Password</label> <div class="form-inline row"> <div class="form-group col-sm-6"> <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required> <div class="help-block">Minimum of 6 characters</div> </div> <div class="form-group col-sm-6"> <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required> <div class="help-block with-errors"></div> </div> </div> </div> ... </form>
4. Call the function with default options on the form and the plugin will do the rest.
$('form').validator()
5. Available options with default values.
$('form').validator({ // the delay in milliseoncds delay: 500, // allows html inside the error messages html: false, // disable submit button if there's invalid form disable: true, // Scroll to and focus the first field with an error upon validation of the form. focus: true, // define your custom validation rules custom: {}, // default errof messages errors: { match: 'Does not match', minlength: 'Not long enough' }, // feedback CSS classes feedback: { success: 'glyphicon-ok', error: 'glyphicon-remove' } })
Change log:
v0.11.9 (2017-03-17)
- Fixing another issue with <select multiple/> elements.
- No longer skipping a custom validator if its attribute has a false value.
- Fixing stale values being read for data-attributes.
- swapping order of `:first` selector for a safer `.focusError()`.
2016-12-16
- Fixed Multiselect default behavior
This awesome jQuery plugin is developed by 1000hz. For more Advanced Usages, please check the demo page or visit the official website.