A form tag must be included and all inputs must be within the form. In Guardian now the novalidate attribute is added to the form tag during initialization. This attribute prevents the browser's native validation from activating.

Guardian uses input attributes to determine which inputs to validate and how to validate them, see Input Attributes for more information.

The following is the HTML structure created for the error message. NOTE: Both error message and empty message share the same element.

<p class="ui-error-message" id="error-message-phone"></p>

data-error-message

Attribute

The message that will appear below the input, when a field is invalid. NOTE: If the data-empty-message attribute is set and the field is empty and required, then the empty message will display instead of the error message. The error message is shown on "blur" as long as the required field is empty and hidden on "focus".

The following is the HTML structure created for the error message. NOTE: Both error message and empty message share the same element.

<p class="ui-error-message" id="error-message-phone"></p>

data-group-name

Attribute

The name of the group. Every group name must be unique. For more information, see Grouping.

data-group-members

Attribute

A list input names that are part of the group. Names are separated by a space. For more information, see Grouping.

data-match-input

Attribute

The id of the input that needs to be matched. For more information, see matching.

data-pattern

Attribute

The validation pattern that the input value will be validated against (See Global Object:$patterns below). This attribute should be included on every input required or optional (exceptions: radio buttons, check boxes, select boxes), but each input can only have one pattern. If data-pattern is not included the input will be validated as alphaNum.

<input type="text" name="phone" data-pattern="phone">

required

Attribute

This declares that the input cannot be left blank. If required is set, but the data-pattern attribute is not, the input will be validated as alphaNum

There two types of options, variables and functions. Variables are used to store class names and string data, where as functions allow for the functionality of the plugin to be extended or customize it for your specific needs. For examples on extending the Guardian, see Extending.

Grouping is a means of validating multiple inputs as one. Meaning that all inputs must valid for the group to be valid. Grouping could also be used to set a specific element to receive the state classes. All group data is stored within the Global Object in the $groups object. Groups are adding automatically during initialization.

To use grouping, the data-group-name, the data-group-members and id attributes must be added to a parent tag. The following is example of input grouping

data-group-name

Attribute

The name of the group. Every group name must be unique.

data-group-members

Attribute

A list input names that are part of the group. Names are separated by a space.

Checkbox grouping is slightly different in respects, the parent has optional data-group-min and data-group-max attributes and checkbox groups will appear in the $inputs object as one group, whereas input grouping show each individual input.

The guardian function also returns the Global Object making it possible to access the methods and variables outside of the validate invocation.

var guardian = $('#contactForm').guardian(); console.log(guardian);

9. GLOBAL OBJECT: $pattern

$patterns is an object of regular expressions used the validation of input value. The name of each pattern can be used in the value of the data-pattern attribute. The following is a list of the patterns found in the $patterns object. Additional patterns maybe add using the addPatterns(obj) method.

For security reasons, text inputs and textareas that have no pattern attribute, but are required or have a value are validated using alphaNum.

alpha

RegExp

Description: characters (lower and upper) + "_" + "'" + "&"

RegExp: /^[a-z_'&]+$/i

alnum

RegExp

Description: characters (lower and upper) + numbers + "_" + "'" + "&"

RegExp: /^[\w'&]+$/

number

RegExp

Description: numbers (integers and decimals)

RegExp: /^(-?)((\d+)|(\d+).(\d*))$/

zip

RegExp

Description: zip code (5 or 9)

RegExp: /(^\d{5,9}$)|(^\d{5}-\d{4}$)/

currency

RegExp

Description: numbers or decimals (2 places) with optional $

RegExp: /^[$]?\d{1,3}(?:,?\d{3})*(?:\.\d{2})?$/

year

RegExp

Description: full year either 19 or 20 prefix

RegExp: /(^(19|20)\d{2})$/

phone

RegExp

Description: 10 digit phone any standard format, number is reformatted on blur

$status is used to monitor the current status of the form based on the user action.

changed

Boolean

Description: equals true if any field value has changed since initialization

submitted

Boolean

Description: equals true if the form has been submitted

11. GLOBAL OBJECT: Other Objects

The following are additional objects within the Global Object.

$el

jQuery Object

Description: jQuery object for the form being validated

$inputs

Object

Description: object of the inputs that have been validated

$groups

Object

Description: object of the groups available within the form, groups are added during initialization, groups can be manually added using addGroup(el)

12. GLOBAL OBJECT: Input Category Arrays

Input Category Arrays are used to categorize inputs based on type or data-pattern. Additional types can be added to any category by using addInputTypes(obj) method.

$checkboxInputs

Array

Description: checkbox inputs

Value: ['checkbox']

$customInputs

Array

Description: user generated list of inputs, used in conjuction with validateCustom(el)

Value: []

$emailInputs

Array

Description: inputs with a type or data-pattern of 'email'

Value: ['email']

$fileInputs

Array

Description: inputs with a type of 'file'

Value: ['file']

$hiddenInputs

Array

Description: all inputs with a type of 'hidden', hidden inputs are not validated

Value: ['hidden']

$matchInputs

Array

Description: inputs with the data-pattern of 'match', see matching for more information

Value: ['match']

$numberInputs

Array

Description: inputs with a type of 'number' or data-pattern of 'num', number inputs are validated that are within min and max (default:-Infinity and Infinity)

Value: ['number', 'num']

$phoneInputs

Array

Description: inputs with a type of 'tel' or data-pattern of 'phone', phone inputs are validated and reformatted

Value: ['tel', 'phone']

$radioInputs

Array

Description: radio inputs

Value: ['radio']

$textInputs

Array

Description: standard text inputs with a type of 'text' or 'password'

Value: ['text','password']

13. GLOBAL OBJECT: Methods

The following are methods intended for public use within any setting function (e.g. extend) through the this parameter.

addGroup(jQuery object)

Returns: False

A new group is created based on the group attributes found in the provided jQuery object and added to the $groups object. The jQuery object must have the attributes data-group-name anddata-group-members.