Ошибки
Ошибки проверяются при каждом изменении формы, а показываются, когда пора — чтобы не ругать пользователя, пока он ещё печатает.
Когда показываются ошибки
mode | Ошибка поля видна |
|---|---|
'blur' (по умолчанию) | После ухода с поля (touch) |
'input' | Сразу, как только значение поменялось, или после ухода с поля |
'submit' | Только после попытки отправить форму |
После первой попытки отправки (handleSubmit или validate) видны все ошибки независимо от режима. Все текущие ошибки, даже ещё не показанные, — в form.allErrors.
const form = useForm(Signup, { initial, mode: 'input' });Ошибки с сервера
Если обработчик отправки выбросил ошибку с ответом 422 от Laravel (axios, ofetch), ошибки сами разложатся по полям — ничего делать не нужно. Ошибка поля исчезнет, как только пользователь изменит это поле; при правке других полей она остаётся.
Другой формат ответа — опция extractErrors у useForm или ручной вызов setErrors:
// axios / ofetch: 422 is handled automatically
const submit = form.handleSubmit((data) => axios.post('/api/signup', data));
// fetch: no exception on 422 — call setErrors yourself
const submitFetch = form.handleSubmit(async (data) => {
const res = await fetch('/api/signup', { method: 'POST', body: JSON.stringify(data) });
if (res.status === 422) {
const { errors } = await res.json(); // { email: ['The email has already been taken.'] }
form.setErrors(errors);
return;
}
form.reset();
});Язык и названия полей
Задаются для формы теми же опциями, что у validate. Свои тексты целиком — свой lang-файл.
import ru from 'tinyval/locales/ru';
const form = useForm(Signup, {
initial: { name: '', email: '' },
messages: { ...ru, required: 'Поле «{label}» обязательно' },
labels: { name: 'Имя', email: 'Почта' },
});Фокус на первой ошибке
При неудачной отправке фокус сам переходит на первое по разметке поле с ошибкой — поиск идёт по атрибуту name, поэтому у полей должен быть name с путём (name="email", name="items.0.title"). useField ставит его сам. Отключается опцией focusOnError: false.
Для своей логики есть onInvalid — он получает видимые ошибки:
const submit = form.handleSubmit(save, (errors) => {
toast.error(`Please fix ${Object.keys(errors).length} fields`);
});