Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.
***
{{> examples_abide_basic}}
***
## Setting Up Validation
To enable validation with Abide, add the `data-abide` attribute to your `form` element. Then add the `required` attribute to each input that you want to require. Additionaly, you can define a `pattern` to define restraints on what users can input.
{{> examples_abide_basic_rendered}}
***
## Predefined Patterns
Abide has several patterns common validation patterns built into the library:
{{> examples_abide_patterns}}
You can also use these patterns by setting the input's type to the name of the pattern instead of using the pattern attribute:
{{#markdown}}
```html
```
{{/markdown}}
There is a good list of valid HTML5 input types on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input). Try avoiding patterns defined by type that do not match the specification.
You can use the following shortcut for named patterns that aren't valid input types:
{{#markdown}}
```html
```
{{/markdown}}
***
## Custom Named Patterns
By overriding Abide during Foundation initilization, you can define your own custom patterns or override the default patterns to validate against.
{{> examples_abide_custom_patterns}}
You can then use these custom patterns like you would the predfined patterns in your markup:
{{> examples_abide_custom_patterns_rendered}}
***
## Equal To
To add a confirmation field, you can define the `data-equalto` attribute.
{{> examples_abide_equalto}}
***
## Error Messages
To display an error message for your invalid form element, include a `small` tag with an `error` class as a sibling of your input.
{{> examples_abide_errors}}
We have wrapped our input in a div in the example above. This div will receive an `error` class when the input is invalid. This class will show our error message and style the label and input accordingly.
Invalid inputs inherit a `data-invalid` attribute.
***
## Events
If a submit event is fired, a `valid` event is triggered when the form is valid and an `invalid` event is triggered when the form is invalid.
You can bind to these events and fire your own callback:
{{> examples_abide_events}}
***
## Using the JavaScript
Before you can use Abide you'll want to verify that jQuery and `foundation.js` are available on your page. You can refer to the [JavaScript documentation](../javascript.html) on setting that up.
Just add `foundation.abide.js` AFTER the `foundation.js` file. Your markup should look something like this:
{{> examples_javascript}}
Required Foundation Library: `foundation.abide.js`
### Optional JavaScript Configuration
{{> examples_abide_javascript_options}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file: