Validatr

Validatr

/ Fields

Cross Browser HTML5 Form Validation.

View

Attributes

The following are global attrbiutes that can be added to any element.

Attribute Description
data-location The location of the error message. If set on a field this will override any value specified in the widget options.
data-message A custom error message to display.
form Allows you to include a field that exists outside a form in the form validation. The value of this attribute is the id of the form you want to use.
required Indicates that a field must have a value. In the case of checkbox and radio inputs required to see if the field is checked.
type="radio" When using inputs with a type radio only one input in that group needs the required attribute.

Types

Validatr supports the follwoing HTML5 new input types. Input types such as text, checkbox, radio, etc. are also supported, but do not require the same level of validation. Input types such as tel don't have any validation logic in the HTML5 spec. Use the pattern attribute or create your own custom test.


Color


Form Valid!
<input type="color">

Format The color provided must be a simple color format, example: #000000


Date


Form Valid!
<input type="date">

Attributes

Attribute Format Description
min yyyy-mm-dd A valid ISO 8601 date
max
date-format yyyy-mm-dd (default)

Any combination of mm, dd, and yyyy separated by a /, - or .

When the date input type is not supported by the browser the input value will be expected in whatever format is specified.

Email


Form Valid!
<input type="email">

Attributes

Attribute Format Description
multiple "" or "multiple" Allows for a comma , separated list of email addresses
pattern RegExp Provide an alternate pattern for an email address, such as restricting to a domain

Number


Form Valid!
<input type="number">

Attributes

Attribute Format Description
min Number The minimum value for the input
max Number The maximum value for the input
step Number The increment between valid numbers starting from the min value or 0. Must be a postive number.

Range


Form Valid!
<input type="range">

Defaults If the range type is supported by the browser the default min value is 0 and the max value is 100.

Attributes

Attribute Format Description
min Number The minimum value for the input
max Number The maximum value for the input
step Number The increment between valid numbers starting from the min value or 0. Must be a postive number.

URL


Form Valid!
<input type="url">

Validity An absolute URL that can contain leading or trailing whitespace.

Attributes

Attribute Format Description
pattern RegExp Provide an alternate pattern for an email address, such as restricting to a domain