Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 43 additions & 4 deletions content/docs/blocks/forms.mdx
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,19 +39,58 @@ Customize form blocks for your application:

### Add Validation

The blocks on this page are built from plain `input` nodes, and an `input`
declares its own validation keys — `required`, `pattern`, `maxLength`, `min`,
`max` and `step` — which the renderer forwards to the native HTML input
attributes:

```json
{
"type": "input",
"name": "email",
"inputType": "email",
"required": true,
"validation": {
"pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$",
"message": "Please enter a valid email address"
}
"pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$"
}
```

`inputType: "email"` already gets the browser's own email check; `pattern`
tightens it. The browser enforces these constraints when the input is submitted
inside a `<form>`.

An `input` node has **no `validation` key**. Rule objects with custom messages
belong to the [form component](/docs/components/form/form), whose `fields[]`
entries carry them. Every rule there is a `{ value, message }` object, and
`validation.required` supplies the message only — whether the field is required
is decided by `required` on the field itself:

```json
{
"type": "form",
"fields": [
{
"name": "message",
"type": "textarea",
"label": "How can we help?",
"required": true,
"validation": {
"required": "Please tell us how we can help",
"minLength": { "value": 20, "message": "Please use at least 20 characters" },
"maxLength": { "value": 2000, "message": "Please keep it under 2000 characters" }
}
}
]
}
```

`pattern` is the one rule that route cannot take from JSON: react-hook-form runs
it only when the rule's `value` is a compiled `RegExp`, and no JSON document can
hold one. Declare the pattern on the object field's metadata instead (`pattern`,
a string, which `@object-ui/fields` compiles before the rule reaches the form),
or in a TypeScript-authored schema pass the real thing —
`pattern: { value: /.../, message: '...' }`. The full rule table is in the
[Form Plugin](/docs/plugins/plugin-form) reference.

### Add Submit Action

```json
Expand Down