`validity`

Add validation to an input control

Usage

as attribute:

<input 
  validity="string"
  [validity-event="string"]
  [validity-message-<rule>="string"]
  [validity-target-<rule>="string"]>
</input>

Arguments

Param	Type	Details
validity	string	The rules used to validate this input (separate multiple rules with a space). See Rules for a list of default rules, and how to add custom ones
validity-event (optional)	string	The event used to trigger validation on this input. When unspecified, the default event will be used. See Options for a list of supported event types, and on how to set the default event
validity-message-`<rule>` (optional)	string	The message to display when the `<rule>` is invalid. The `<rule>` must exist within the list of rules defined in the `validity` argument
validity-target-`<rule>` (optional)	string	Any valid jQuery selector. The visibility of the matching element will be toggled when the `<rule>` is invalid. The `<rule>` must exist within the list of rules defined in the `validity` argument

📘
An input can, and usually does, contain multiple validity-message-<rule> arguments. You'll typically have one for each rule used on the input.
The same can be said for validity-target-<rule>.

Examples

Example 01: validity-message

The "required" rule is used with a validity-label configured to display the validity-message-<rule> value. Input validation is triggered by the "blur" validity-event, and form validation is triggered when it's submitted via an ng-submit. The style option is configured for Bootstrap 3.

Example 02: validity-message (multiple)

The "required" rule and "email" rule are used with a validity-label configured to display the validity-message-<rule> value. Input validation is triggered by the "blur" validity-event, and form validation is triggered when it's submitted via an ng-submit. The style option is configured for Bootstrap 3.

Example 03: validity-target

This example, while implausible, illustrates how the validity-target can exist anywhere in the DOM. It does not have to be on the form, or within the ng-controller.

The "required" rule is used with a validity-label configured to display the validity-message-<rule> value, while the custom "password" rule is used with a validity-target-<rule> configured to display an element when invalid. Input validation is triggered by the "blur" validity-event, and form validation is triggered when it's submitted via an ng-submit.The style option is configured for Bootstrap 3.