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
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. |