Validation

Description ​

Validation refers to the system's process of confirming values entered by the user.

How validation works ​

• In forms and filters, validation can be executed concurrently through unFocus and Submit. Note: This option is not suitable for forms with limits; use only Submit for them.
• Empty fields (where the user has not entered any value) should not be validated by unFocus.

• Following validation by unFocus, erroneous inputs are highlighted. Upon focusing on them, a tooltip emerges, guiding users on necessary adjustments within the form.
• Post validation via Submit, inputs with errors acquire an invalid state. Focus, accompanied by a tooltip, is directed towards the first erroneous input.
• If the page is long, focusing on the initial input with an error should scroll the page to it. In such cases, a tooltip providing correction guidance should also be visible.

How the invalid state is removed from the input ​

• If browser-based validation is in play, the invalid state can be reset as soon as the input becomes valid.
• For server-based validation, the invalid state can be reset each time input data changes.

If users address inputs with errors out of sequence, all uncorrected inputs will remain highlighted, unless changes are made to them.

unFocus validation ​

Where deductions of paid limits and backend complexities are absent, immediate validation can be applied as users complete forms. Utilize this validation approach to facilitate form and filter completion. Displaying correction cues before submitting the form is recommended.

Appearance ​

Uniformly, all form elements assume an invalid state, marked by a var(--border-danger-active) border. When focused, this state triggers a tooltip in the warning theme.

Notice with error message ​

For guidance on positioning the error message notice, consult the Notice guide.

Validation messages ​

A standard text pattern is: Please enter something.