getConstraints

A helper that returns an object containing the validation attributes for each field by introspecting the valibot schema.

1import { getConstraints } from '@conform-to/valibot/future';
2
3const constraint = getConstraints(schema);

#Parameters

`schema`

The value to introspect. If it's not a valid valibot schema, the function returns undefined.

#Examples

Deriving constraints from a schema

1import { getConstraints } from '@conform-to/valibot/future';
2import {
3  maxLength,
4  minLength,
5  object,
6  optional,
7  pipe,
8  regex,
9  string,
10} from 'valibot';
11
12const schema = object({
13  title: pipe(string(), minLength(5), maxLength(20)),
14  description: optional(pipe(string(), minLength(100), maxLength(1000))),
15  password: pipe(
16    string(),
17    regex(/[A-Z]/, 'Must contain an uppercase letter'),
18    regex(/[0-9]/, 'Must contain a number'),
19  ),
20});
21const constraint = getConstraints(schema);
22// {
23//   title: { required: true, minLength: 5, maxLength: 20 },
24//   description: { required: false, minLength: 100, maxLength: 1000 },
25//   password: {
26//     required: true,
27//     pattern: '^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$',
28//   },
29// }

Passing constraints to useForm

Call getConstraints directly and pass the result to useForm to enable native HTML validation attributes (e.g. required, minLength, min, pattern) on your form fields:

1import { useForm } from '@conform-to/react/future';
2import { getConstraints } from '@conform-to/valibot/future';
3
4const { form, fields } = useForm({
5  constraint: getConstraints(schema),
6});

Using with configureForms

Pass getConstraints to configureForms to automatically derive constraints for all forms without repeating it in every useForm call:

1import { configureForms } from '@conform-to/react/future';
2import { getConstraints } from '@conform-to/valibot/future';
3
4const { useForm } = configureForms({
5  getConstraints,
6});

#Tips

Pattern limitations

The pattern generation is best-effort with the following limitations:

Regex flags: The i (case-insensitive) flag is not supported. No pattern is generated for case-insensitive regexes or when the serialized regex is not a valid HTML pattern under the browser's v flag.
Backreferences: Numbered backreferences (\1, \2, etc.) may break when multiple regex validators for the same field are combined into one pattern. Named backreferences (\k<name>) are more reliable, but each regex combined into the same pattern must use unique group names.