Cross-browser HTML5 Form Validation Plugin For jQuery - Attrvalidate

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: /^(\[email protected]\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.