Validation

Basic validation

To use the basic form validation, add the data-form-validate="auto" attribute to the form-control element.
This will enable the validation depending on the rules applied to the input like required or type="email"...

Custom helper messages

Create custom validation helper messages by adding two spans in your form-field element.
This makes you able to create custom separate messages depending on the input validation state.
Don't forget to add the data-form-validate attribute on the form-control element without the auto value.

Lazy validation

Setting the validation to lazy will change the watching event from input to change.
This will make the validation messages not be updated at every character typed.
To use it, add the lazy value to the data-form-validate attribute.

Auto & Lazy validation

To use both auto and lazy validation, just write the two values separated with a comma :
data-form-validate="auto,lazy"

Methods

Styling

Common methods & styling

For all the common methods and styling properties, please refer to the Material forms page.