mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
83 lines
4.1 KiB
Plaintext
83 lines
4.1 KiB
Plaintext
---
|
|
title: Validation
|
|
seoTitle: Form validation states
|
|
order: 12
|
|
summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
|
description: Show valid and invalid states on form fields with feedback messages, so users know exactly what to correct before submitting.
|
|
related: [/ui/forms/elements, /ui/forms/helpers]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Validation states
|
|
|
|
To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
|
|
|
To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes. For assistive tech, also set `aria-invalid="true"` on invalid controls.
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label" for="state-valid">Valid state</label>
|
|
<input type="text" id="state-valid" class="form-control is-valid" aria-invalid="false" />
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="state-invalid">Invalid state</label>
|
|
<input type="text" id="state-invalid" class="form-control is-invalid" aria-invalid="true" />
|
|
</div>
|
|
</Example>
|
|
|
|
## Validation feedback
|
|
|
|
To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes. Link the message with `aria-describedby` when you can.
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label required" for="city-invalid">City</label>
|
|
<input type="text" class="form-control is-invalid" id="city-invalid" required aria-invalid="true" aria-describedby="city-invalid-feedback" />
|
|
<div class="invalid-feedback" id="city-invalid-feedback">Please provide a valid city.</div>
|
|
</div>
|
|
</Example>
|
|
|
|
You can also use the `.valid-feedback` to provide users with positive feedback.
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label required" for="city-valid">City</label>
|
|
<input type="text" class="form-control is-valid" id="city-valid" required value="Warsaw" aria-describedby="city-valid-feedback" />
|
|
<div class="valid-feedback" id="city-valid-feedback">Looks good!</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Subtle validation states
|
|
|
|
If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
|
|
|
|
To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
|
|
|
|
These variants drop the colored frame and the feedback message, so the state is left to a small icon. Keep `aria-invalid` on the field, and keep the reason in text somewhere the field points to - otherwise the error exists only as a symbol.
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label" for="state-valid-lite">Valid state</label>
|
|
<input type="text" id="state-valid-lite" class="form-control is-valid is-valid-lite" aria-invalid="false" />
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="state-invalid-lite">Invalid state</label>
|
|
<input type="text" id="state-invalid-lite" class="form-control is-invalid is-invalid-lite" aria-invalid="true" />
|
|
</div>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Colour alone must not say that a field is wrong. Keep `aria-invalid="true"` on the field and a message in text.
|
|
- Give the feedback element an `id` and point the field at it with `aria-describedby`, so the message is read with the field rather than after the form.
|
|
- Say what to do, not only what failed. "Please provide a valid city" beats "Invalid".
|
|
- On submit, move focus to the first field that failed. Otherwise a keyboard user has to hunt for it.
|
|
- Validate when the user leaves a field, not on every keystroke. A message that appears and disappears while typing is announced over and over.
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize form validation states. The default values are:
|
|
|
|
<CodeDocs name="form-validation-variables" file="core/scss/_variables.scss" />
|