attr validate

Lightweight validation using form element attributes.

Name Coffee type Espresso Macchiato Cappuccino Latte Americano Espresso shots Submit Reset

Basic jQuery form validation, using HTML5 attributes. Recommended as a polyfill for older browsers which do not provide built-in validation.

Features

• Inline error messages (optional)
• Error summary with internal links to each error (optional)
• Enforces required attribute
• Checks number, email, tel, and date input types for valid entries
• Enforces min and max attributes, when present, for number and date input types
• Error messages can be set with a data-error-msg attribute, or will be constructed using label text

Usage

Download the plugin, then include the js file.

(Note that CSS is not bundled with the plugin. For guidance, see the example page included.)

<script src="attrvalidate.jquery.min.js" type="text/javascript"></script>


To initialise form validation, call attrvalidate on the form with any additional options specified.

$('#myForm').attrvalidate({
  showFieldIndicator: false
});

A reset function is available, which will clear all validation errors.

$('#myResetBtn').click(function(){ $('#myForm').attrvalidate('reset'); });

Options

Option	Default	Purpose
showFieldIndicator	true	Show inline validation against each field.
showErrorSummary	true	Show a summary of errors after an invalid form submission.
errorSummaryMsg	'Please fix the following issues before continuing:'	Message which precedes the list of errors.
validateNumber	true	Check for valid number (float) entry on input types of 'number'.
validateEmail	true	Check for valid email address entry on input types of 'email'.
emailRegex	/^(\S+@\S+)*$/	Regular expression used for email validation. Default allows any non-whitespace characters along with an @ symbol.
validateTel	true	Check for valid phone number entry on input types of 'tel'.
telRegex	/^\+*[\d-()]{7,20}$/	Regular expression used for phone number validation. Default allows between 7 and 20 numbers, hyphens, or parentheses, optionally preceded by a plus sign.
validateDate	true	Check for valid date entry on input types of 'date'.
submitFunction	-	Optional function to run on successful validation, instead of submitting the form.