Validation is the system's verification of values entered by the user.
How validation works
- Validation in forms and filters can be performed simultaneously by
Submit. This option does not apply to forms with limits — use only
- Do not validate empty fields (in which user has not entered a value) by
Since form validation can be performed by clicking on a button, it is not recommended to set the main buttons to
disabledstate. 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
focuswith the tooltip with a hint is passed to the first invalid input.
focuson 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.
How the invalid state is removed from the input
- If validation is performed in the browser, you can reset the
invalidstate as soon as the input becomes valid.
- If validation is performed on the server, you can reset the
invalidstate 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.
Notice with error message
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.
|If the field is empty||If we mean that the user enters their data in the form, then we write:
|If the user enters someone else's data||Simply write:
|If the field is filled in with an error||For example, the field with email:
|Standard error in the checkbox when accepting Terms & Conditions||