Form errors

Manipulate form errors with use-form hook

Docs

Package

Errors object

form.errors is an object of React nodes that contains validation errors:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { firstName: '', lastName: '' },
  validate: {
    firstName: (value) => (value.length < 2 ? 'First name is too short' : null),
    lastName: (value) => (value.length < 2 ? 'Last name is too short' : null),
  },
});

// Errors object is empty by default
form.errors; // -> {}

// Errors will be filled when you call form.validate manually
// or automatically with form.onSubmit handler
form.validate();

form.errors; // ->
// {
//   firstName: 'First name is too short',
//   lastName: 'Last name is too short'
// }

Initial errors

Same as with initial values you can set initial form errors:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { firstName: '', lastName: '' },
  initialErrors: {
    firstName: 'First name is too short',
    lastName: 'Last name is too short',
  },
});

setErrors handler

import { useForm } from '@mantine/form';

const form = useForm();
form.setErrors({ firstName: 'Too short', email: 'Invalid email' });

form.errors;
// -> { firstName: 'Too short', email: 'Invalid email' }

setFieldError handler

form.setFieldError handler sets error of the given field:

import { useForm } from '@mantine/form';

const form = useForm({ initialValues: { name: '', email: '' } });
form.setFieldError('email', 'Invalid email');

form.errors; // -> { email: 'Invalid email' }

clearErrors handler

form.clearErrors handler clear all form errors:

import { useForm } from '@mantine/form';

const form = useForm({ initialErrors: { name: 'Too short', email: 'Invalid email' } });
form.clearErrors();

console.log(form.errors);
// -> {}

clearFieldError handler

form.clearFieldError handler clears error of the given field:

import { useForm } from '@mantine/form';

const form = useForm({ initialErrors: { name: 'Too short', email: 'Invalid email' } });
form.clearFieldError('name');

console.log(form.errors);
// -> { email: 'Invalid email' }

Errors as react node

You can use any React node as an error message:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { name: '', email: '' },
  initialErrors: {
    name: <p>Paragraph error</p>, // -> error as a react element
    email: 42, // -> error as a number
  },
});

Note that errors that are false, null or undefined will be automatically removed:

import { useForm } from '@mantine/form';

const form = useForm({ initialErrors: { name: 'name-error', email: null } });
form.errors; // -> { name: 'name-error' }, email error is not included in errors object

FormErrors type

form.errors type is Record<string, React.ReactNode>, you can import a shorthand FormErrors type from @mantine/form:

import type { FormErrors } from '@mantine/form';

You can also get type directly from the form instance:

import { useForm } from '@mantine/form';

const form = useForm();

const handleErrors = (errors: typeof form.errors) => {};

Form values

Form validation

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter