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.

Valid helper text Invalid helper text

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.

Valid helper text Invalid helper text

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

Method Description
Axentix.Forms.validate(form) This method will force to check the validation rules on the specified form.
Axentix.Forms.resetValidation(form) This method will reset the validation style on the specified form.

Styling

CSS Variable Default value Description
--ax-form-helper-color #747474 Form helper default color.
--ax-form-valid-color #12AD12 Default valid form color when validation is enabled.
--ax-form-invalid-color #DF2C29 Default invalid form color when validation is enabled.