mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
77 lines
3.5 KiB
Plaintext
77 lines
3.5 KiB
Plaintext
---
|
|
title: Validation
|
|
seoTitle: Form validation states
|
|
order: 12
|
|
summary: Validation states mark a field as valid or invalid and show a message under it, so the user sees what to fix.
|
|
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]
|
|
sass-vars: form-validation
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Validation states
|
|
|
|
Validation states mark a field as valid or invalid, so the user sees which fields to correct and, for an invalid one, why.
|
|
|
|
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
|
|
|
|
For a quieter version, show a tick or a cross icon instead of the colored frame and the feedback message.
|
|
|
|
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.
|