Validation

Validation is the system's verification of values entered by the user.

• Validation in forms and filters can be performed simultaneously by unFocus and Submit. This option does not apply to forms with limits — use only Submit for them.
• Do not validate empty fields (in which user has not entered a value) by unFocus.

Since form validation can be performed by clicking on a button, it is not recommended to set the main buttons to disabled state. This creates a false impression that the form or filter doesn't work at all.

• After validation by unFocus, an input with the error is highlighted. When you focus on it, a tooltip appears with a hint what you need to fix in the form.
• After validation by Submit, all inputs with errors get the invalid state, and focus with the tooltip with a hint is passed to the first invalid input.
• The focus on the first input with an error should scroll the page to it, if the page is long, show a tooltip with a hint of what to fix.

The tooltip tells user why the input gets invalid state or what to do to send the data. If possible, it should be placed so that important content is also visible next to the input or control. Don't forget to put a full stop at the end of the text in the tooltip.

• If validation is performed in the browser, you can reset the invalid state as soon as the input becomes valid.
• If validation is performed on the server, you can reset the invalid state whenever the data in the input changes.

If the user corrects inputs with errors out of order, all uncorrected inputs are highlighted if no changes were made to them.

You can validate the inputs immediately, as the user fills out the form, if there are no deductions of paid limits and additional difficulties on the backend.

Use this validation to make it easier for the user to fill out forms and filters. We recommend you to immediately show the user what needs to be corrected before submitting the form.

All form elements have the same invalid state: a var(--border-danger-active) border and a tooltip with the warning theme when focused.

Find more about the placement of the notice with an error message in the Notice guide.

The General pattern for the text: Please enter something.