Cross-browser HTML5 Form Validation Plugin For jQuery - Attrvalidate
File Size: | 9.95 KB |
---|---|
Views Total: | 1125 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Attrvalidate is a simple yet powerful jQuery form validator plugin which allows to validate your form fields using HTML5 input attributes such as 'required', min/max length, email, tel, etc.
More features:
- Validates form fields on both type and submit.
- Custom error messages.
- Shows a validation summary panel containing all the errors when submitting the form. Clicking on the error messages will scroll the webpage to the corresponding invalid form fields.
How to use it:
1. Load jQuery library and the jQuery Attrvalidate plugin's script at the end of the document so the page loads faster.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="attrvalidate.jquery.js"></script>
2. Use the 'data-error-msg' attribute to specify the error messages for the invalid form fields.
<input id="firstName" name="firstName" type="text" required data-error-msg="We need to know who you are" />
3. Call the function on the form element and the plugin will take care of the rest.
$('#form').attrvalidate();
4. Plugin's default options.
$('#form').attrvalidate({ // show inline validation showFieldIndicator: true, // show error summary showErrorSummary: true, // error message in summary errorSummaryMsg: 'Please fix the following issues before continuing:', // validate telephone number validateTel: true, telRegex: /^\+*[\d-()]{7,20}$/, // validate email validateEmail: true, emailRegex: /^(\S+@\S+)*$/, // validate date validateDate: true, // validate numeric value validateNumber: true });
This awesome jQuery plugin is developed by fraddski. For more Advanced Usages, please check the demo page or visit the official website.