From 528e9e11a446dceda4af7e1dabba9a9b4583d917 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Wed, 26 Nov 2025 16:58:47 +0100
Subject: [PATCH 1/6] wip

---
 v2/core-concepts/the-protocol.mdx |  17 +
 v2/the-basics/forms.mdx           | 726 ++++++++++++++++++++++++++++++
 2 files changed, 743 insertions(+)

diff --git a/v2/core-concepts/the-protocol.mdx b/v2/core-concepts/the-protocol.mdx
index ac44715..bf01c7f 100644
--- a/v2/core-concepts/the-protocol.mdx
+++ b/v2/core-concepts/the-protocol.mdx
@@ -143,6 +143,16 @@ The following headers are automatically sent by Inertia when making requests. Yo
   Indicates whether the requested data should be appended or prepended when using [Infinite scroll](/v2/data-props/infinite-scroll).
 </ParamField>
 
+The following headers are used for [Precognition](/v2/the-basics/forms#precognition) validation requests.
+
+<ParamField header="Precognition" type="boolean">
+  Set to `true` to indicate this is a Precognition validation request.
+</ParamField>
+
+<ParamField header="Precognition-Validate-Only" type="string">
+  Comma-separated list of field names to validate.
+</ParamField>
+
 ## Response Headers
 
 The following headers should be sent by your server-side adapter in Inertia responses. If you're using an official server-side adapter, these are handled automatically.
@@ -442,3 +452,10 @@ Inertia uses specific HTTP status codes to handle different scenarios.
 | **302 Found**       | Standard redirect response. Inertia's server-side adapters automatically convert this to `303 See Other` when returned after `PUT`, `PATCH`, or `DELETE` requests.                                        |
 | **303 See Other**   | Used for redirects after non-GET requests. This status code tells the browser to make a `GET` request to the redirect URL, preventing duplicate form submissions that could occur if the browser repeated the original request method. |
 | **409 Conflict**    | Returned when there's an asset version mismatch or for external redirects. For asset mismatches, this prompts a full page reload. For external redirects, the response includes an `X-Inertia-Location` header and triggers a `window.location` redirect client-side. |
+
+The following status codes are used for [Precognition](/v2/the-basics/forms#precognition) validation requests.
+
+| Status Code                   | Description                                                                                     |
+|:------------------------------|:------------------------------------------------------------------------------------------------|
+| **204 No Content**            | Successful Precognition validation request with no validation errors.                           |
+| **422 Unprocessable Entity**  | Precognition validation request with validation errors. The response body contains the errors.  |
diff --git a/v2/the-basics/forms.mdx b/v2/the-basics/forms.mdx
index d906887..39aecde 100644
--- a/v2/the-basics/forms.mdx
+++ b/v2/the-basics/forms.mdx
@@ -954,6 +954,427 @@ function handleSubmit() {
 
 In React and Vue, refs provide access to all form methods and reactive state. In Svelte, refs expose only methods, so reactive state like `isDirty` and `errors` should be accessed via [slot props](#slot-props) instead.
 
+### Precognition
+
+The `<Form>` component includes built-in support for [Laravel Precognition](https://laravel.com/docs/precognition), enabling real-time form validation without duplicating your server-side validation rules on the client.
+
+<Note>
+Precognition requires server-side support. Laravel users should see the [Laravel Precognition documentation](https://laravel.com/docs/precognition) for setup instructions. For other frameworks, see the [protocol page](/v2/core-concepts/the-protocol#request-headers) for implementation details.
+</Note>
+
+Once your server is configured, call `validate()` with a field name to trigger validation for that field. The `invalid()` helper checks if a field has validation errors, while `validating` indicates when a request is in progress.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<template>
+    <Form action="/users" method="post" #default="{ errors, invalid, validate, validating }">
+        <label for="name">Name:</label>
+        <input id="name" name="name" @change="validate('name')" />
+        <p v-if="invalid('name')">{{ errors.name }}</p>
+
+        <label for="email">Email:</label>
+        <input id="email" name="email" @change="validate('email')" />
+        <p v-if="invalid('email')">{{ errors.email }}</p>
+
+        <p v-if="validating">Validating...</p>
+
+        <button type="submit">Create User</button>
+    </Form>
+</template>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post">
+    {({ errors, invalid, validate, validating }) => (
+        <>
+            <label htmlFor="name">Name:</label>
+            <input id="name" name="name" onChange={() => validate('name')} />
+            {invalid('name') && <p>{errors.name}</p>}
+
+            <label htmlFor="email">Email:</label>
+            <input id="email" name="email" onChange={() => validate('email')} />
+            {invalid('email') && <p>{errors.email}</p>}
+
+            {validating && <p>Validating...</p>}
+
+            <button type="submit">Create User</button>
+        </>
+    )}
+</Form>
+```
+
+```svelte Svelte 4 icon="s"
+<Form
+    action="/users"
+    method="post"
+    let:errors
+    let:invalid
+    let:validate
+    let:validating
+>
+    <label for="name">Name:</label>
+    <input id="name" name="name" on:change={() => validate('name')} />
+    {#if invalid('name')}
+        <p>{errors.name}</p>
+    {/if}
+
+    <label for="email">Email:</label>
+    <input id="email" name="email" on:change={() => validate('email')} />
+    {#if invalid('email')}
+        <p>{errors.email}</p>
+    {/if}
+
+    {#if validating}
+        <p>Validating...</p>
+    {/if}
+
+    <button type="submit">Create User</button>
+</Form>
+```
+
+```svelte Svelte 5 icon="s"
+<Form action="/users" method="post">
+    {#snippet children({ errors, invalid, validate, validating })}
+        <label for="name">Name:</label>
+        <input id="name" name="name" onchange={() => validate('name')} />
+        {#if invalid('name')}
+            <p>{errors.name}</p>
+        {/if}
+
+        <label for="email">Email:</label>
+        <input id="email" name="email" onchange={() => validate('email')} />
+        {#if invalid('email')}
+            <p>{errors.email}</p>
+        {/if}
+
+        {#if validating}
+            <p>Validating...</p>
+        {/if}
+
+        <button type="submit">Create User</button>
+    {/snippet}
+</Form>
+```
+
+</CodeGroup>
+
+You may also use the `valid()` helper to check if a field has passed validation.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<Form action="/users" method="post" #default="{ errors, invalid, valid, validate }">
+    <input name="email" @change="validate('email')" />
+    <p v-if="valid('email')">Valid email address</p>
+    <p v-if="invalid('email')">{{ errors.email }}</p>
+</Form>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post">
+    {({ errors, invalid, valid, validate }) => (
+        <>
+            <input name="email" onChange={() => validate('email')} />
+            {valid('email') && <p>Valid email address</p>}
+            {invalid('email') && <p>{errors.email}</p>}
+        </>
+    )}
+</Form>
+```
+
+```svelte Svelte 4 icon="s"
+<Form action="/users" method="post" let:errors let:invalid let:valid let:validate>
+    <input name="email" on:change={() => validate('email')} />
+    {#if valid('email')}
+        <p>Valid email address</p>
+    {/if}
+    {#if invalid('email')}
+        <p>{errors.email}</p>
+    {/if}
+</Form>
+```
+
+```svelte Svelte 5 icon="s"
+<Form action="/users" method="post">
+    {#snippet children({ errors, invalid, valid, validate })}
+        <input name="email" onchange={() => validate('email')} />
+        {#if valid('email')}
+            <p>Valid email address</p>
+        {/if}
+        {#if invalid('email')}
+            <p>{errors.email}</p>
+        {/if}
+    {/snippet}
+</Form>
+```
+
+</CodeGroup>
+
+<Warning>
+A form input will only appear as valid or invalid once it has changed and a validation response has been received.
+</Warning>
+
+#### Validating Multiple Fields
+
+You may validate multiple fields at once using the `only` option. This is particularly useful when building wizard-style forms where you want to validate all visible fields before proceeding to the next step.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<Form action="/users" method="post" #default="{ validate }">
+    <!-- Step 1 fields -->
+    <input name="name" />
+    <input name="email" />
+
+    <button
+        type="button"
+        @click="validate({
+            only: ['name', 'email'],
+            onSuccess: () => goToNextStep(),
+            onValidationError: () => showErrors(),
+        })"
+    >
+        Next Step
+    </button>
+</Form>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post">
+    {({ validate }) => (
+        <>
+            {/* Step 1 fields */}
+            <input name="name" />
+            <input name="email" />
+
+            <button
+                type="button"
+                onClick={() => validate({
+                    only: ['name', 'email'],
+                    onSuccess: () => goToNextStep(),
+                    onValidationError: () => showErrors(),
+                })}
+            >
+                Next Step
+            </button>
+        </>
+    )}
+</Form>
+```
+
+```svelte Svelte 4 icon="s"
+<Form action="/users" method="post" let:validate>
+    <!-- Step 1 fields -->
+    <input name="name" />
+    <input name="email" />
+
+    <button
+        type="button"
+        on:click={() => validate({
+            only: ['name', 'email'],
+            onSuccess: () => goToNextStep(),
+            onValidationError: () => showErrors(),
+        })}
+    >
+        Next Step
+    </button>
+</Form>
+```
+
+```svelte Svelte 5 icon="s"
+<Form action="/users" method="post">
+    {#snippet children({ validate })}
+        <!-- Step 1 fields -->
+        <input name="name" />
+        <input name="email" />
+
+        <button
+            type="button"
+            onclick={() => validate({
+                only: ['name', 'email'],
+                onSuccess: () => goToNextStep(),
+                onValidationError: () => showErrors(),
+            })}
+        >
+            Next Step
+        </button>
+    {/snippet}
+</Form>
+```
+
+</CodeGroup>
+
+#### Touch and Validate
+
+The `touch()` method marks fields as "touched" without triggering validation. You may then validate all touched fields by calling `validate()` without arguments.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<Form action="/users" method="post" #default="{ validate, touch, touched }">
+    <input name="name" @blur="touch('name')" />
+    <input name="email" @blur="touch('email')" />
+    <input name="phone" @blur="touch('phone')" />
+
+    <button type="button" @click="validate()">Validate Touched Fields</button>
+
+    <p v-if="touched('name')">Name has been touched</p>
+</Form>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post">
+    {({ validate, touch, touched }) => (
+        <>
+            <input name="name" onBlur={() => touch('name')} />
+            <input name="email" onBlur={() => touch('email')} />
+            <input name="phone" onBlur={() => touch('phone')} />
+
+            <button type="button" onClick={() => validate()}>Validate Touched Fields</button>
+
+            {touched('name') && <p>Name has been touched</p>}
+        </>
+    )}
+</Form>
+```
+
+```svelte Svelte 4 icon="s"
+<Form action="/users" method="post" let:validate let:touch let:touched>
+    <input name="name" on:blur={() => touch('name')} />
+    <input name="email" on:blur={() => touch('email')} />
+    <input name="phone" on:blur={() => touch('phone')} />
+
+    <button type="button" on:click={() => validate()}>Validate Touched Fields</button>
+
+    {#if touched('name')}
+        <p>Name has been touched</p>
+    {/if}
+</Form>
+```
+
+```svelte Svelte 5 icon="s"
+<Form action="/users" method="post">
+    {#snippet children({ validate, touch, touched })}
+        <input name="name" onblur={() => touch('name')} />
+        <input name="email" onblur={() => touch('email')} />
+        <input name="phone" onblur={() => touch('phone')} />
+
+        <button type="button" onclick={() => validate()}>Validate Touched Fields</button>
+
+        {#if touched('name')}
+            <p>Name has been touched</p>
+        {/if}
+    {/snippet}
+</Form>
+```
+
+</CodeGroup>
+
+The `touched()` helper may also be called without arguments to check if any field has been touched. The `reset()` method clears the touched state for reset fields.
+
+#### Options
+
+The `validate()` method accepts an options object with callbacks and configuration.
+
+```js
+validate('username', {
+    onSuccess: () => {
+        // Validation passed...
+    },
+    onValidationError: (response) => {
+        // Validation failed (422 response)...
+    },
+    onBeforeValidation: (newRequest, oldRequest) => {
+        // Return false to prevent validation...
+    },
+    onFinish: () => {
+        // Always runs after validation...
+    },
+})
+```
+
+You may also call `validate()` with only an options object to validate specific fields.
+
+```js
+validate({
+    only: ['name', 'email'],
+    onSuccess: () => goToNextStep(),
+})
+```
+
+Validation requests are automatically debounced. The first request fires immediately, then subsequent changes are debounced (1500ms by default). You may customize this timeout.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<Form action="/users" method="post" :validate-timeout="500">
+    <!-- ... -->
+</Form>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post" validateTimeout={500}>
+    {/* ... */}
+</Form>
+```
+
+```svelte Svelte icon="s"
+<Form action="/users" method="post" validateTimeout={500}>
+    <!-- ... -->
+</Form>
+```
+
+</CodeGroup>
+
+By default, files are excluded from validation requests to avoid unnecessary uploads. You may enable file validation when you need to validate file inputs like size or mime type.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<Form action="/users" method="post" validate-files>
+    <!-- ... -->
+</Form>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post" validateFiles>
+    {/* ... */}
+</Form>
+```
+
+```svelte Svelte icon="s"
+<Form action="/users" method="post" validateFiles>
+    <!-- ... -->
+</Form>
+```
+
+</CodeGroup>
+
+By default, validation errors are simplified to strings (the first error message). You may keep errors as arrays to display all error messages for fields with multiple validation rules.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<Form action="/users" method="post" with-all-errors>
+    <!-- ... -->
+</Form>
+```
+
+```jsx React icon="react"
+<Form action="/users" method="post" withAllErrors>
+    {/* ... */}
+</Form>
+```
+
+```svelte Svelte icon="s"
+<Form action="/users" method="post" withAllErrors>
+    <!-- ... -->
+</Form>
+```
+
+</CodeGroup>
+
 ## Form Helper
 
 In addition to the `<Form>` component, Inertia also provides a `useForm` helper for when you need programmatic control over your form's data and submission behavior.
@@ -1561,6 +1982,311 @@ form.submit(store())
 
 </CodeGroup>
 
+### Precognition
+
+Just like the `<Form>` component, the `useForm` helper supports [Precognition](#precognition) for real-time validation. You may enable it by chaining the `withPrecognition()` method with the HTTP method and endpoint for validation requests.
+
+<CodeGroup>
+
+```js Vue icon="vuejs"
+import { useForm } from '@inertiajs/vue3'
+
+const form = useForm({
+    name: '',
+    email: '',
+}).withPrecognition('post', '/users')
+```
+
+```js React icon="react"
+import { useForm } from '@inertiajs/react'
+
+const form = useForm({
+    name: '',
+    email: '',
+}).withPrecognition('post', '/users')
+```
+
+```js Svelte icon="s"
+import { useForm } from '@inertiajs/svelte'
+
+const form = useForm({
+    name: '',
+    email: '',
+}).withPrecognition('post', '/users')
+```
+
+</CodeGroup>
+
+For backwards compatibility with the `laravel-precognition` packages, you may also pass the method and URL as the first arguments to `useForm()`.
+
+```js
+const form = useForm('post', '/users', {
+    name: '',
+    email: '',
+})
+```
+
+You may also use [Wayfinder](https://github.com/laravel/wayfinder) when enabling Precognition.
+
+```js
+import { store } from 'App/Http/Controllers/UserController'
+
+const form = useForm({
+    name: '',
+    email: '',
+}).withPrecognition(store())
+
+// Or passing Wayfinder as the first argument...
+const form = useForm(store(), {
+    name: '',
+    email: '',
+})
+```
+
+Once Precognition is enabled, call `validate()` with a field name to trigger validation for that field. The `invalid()` helper checks if a field has validation errors, while `validating` indicates when a request is in progress.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<script setup>
+import { useForm } from '@inertiajs/vue3'
+
+const form = useForm('post', '/users', {
+    name: '',
+    email: '',
+})
+</script>
+
+<template>
+    <form @submit.prevent="form.post('/users')">
+        <input v-model="form.name" @change="form.validate('name')" />
+        <p v-if="form.invalid('name')">{{ form.errors.name }}</p>
+
+        <input v-model="form.email" @change="form.validate('email')" />
+        <p v-if="form.invalid('email')">{{ form.errors.email }}</p>
+
+        <p v-if="form.validating">Validating...</p>
+
+        <button type="submit">Create User</button>
+    </form>
+</template>
+```
+
+```jsx React icon="react"
+import { useForm } from '@inertiajs/react'
+
+const { data, setData, post, errors, validating, validate, invalid } = useForm('post', '/users', {
+    name: '',
+    email: '',
+})
+
+function submit(e) {
+    e.preventDefault()
+    post('/users')
+}
+
+return (
+    <form onSubmit={submit}>
+        <input value={data.name} onChange={e => setData('name', e.target.value)} onBlur={() => validate('name')} />
+        {invalid('name') && <p>{errors.name}</p>}
+
+        <input value={data.email} onChange={e => setData('email', e.target.value)} onBlur={() => validate('email')} />
+        {invalid('email') && <p>{errors.email}</p>}
+
+        {validating && <p>Validating...</p>}
+
+        <button type="submit">Create User</button>
+    </form>
+)
+```
+
+```svelte Svelte 4 icon="s"
+<script>
+import { useForm } from '@inertiajs/svelte'
+
+const form = useForm('post', '/users', {
+    name: '',
+    email: '',
+})
+</script>
+
+<form on:submit|preventDefault={() => $form.post('/users')}>
+    <input bind:value={$form.name} on:change={() => $form.validate('name')} />
+    {#if $form.invalid('name')}
+        <p>{$form.errors.name}</p>
+    {/if}
+
+    <input bind:value={$form.email} on:change={() => $form.validate('email')} />
+    {#if $form.invalid('email')}
+        <p>{$form.errors.email}</p>
+    {/if}
+
+    {#if $form.validating}
+        <p>Validating...</p>
+    {/if}
+
+    <button type="submit">Create User</button>
+</form>
+```
+
+```svelte Svelte 5 icon="s"
+<script>
+import { useForm } from '@inertiajs/svelte'
+
+const form = useForm('post', '/users', {
+    name: '',
+    email: '',
+})
+</script>
+
+<form onsubmit={(e) => { e.preventDefault(); $form.post('/users') }}>
+    <input bind:value={$form.name} onchange={() => $form.validate('name')} />
+    {#if $form.invalid('name')}
+        <p>{$form.errors.name}</p>
+    {/if}
+
+    <input bind:value={$form.email} onchange={() => $form.validate('email')} />
+    {#if $form.invalid('email')}
+        <p>{$form.errors.email}</p>
+    {/if}
+
+    {#if $form.validating}
+        <p>Validating...</p>
+    {/if}
+
+    <button type="submit">Create User</button>
+</form>
+```
+
+</CodeGroup>
+
+You may also use the `valid()` helper to check if a field has passed validation.
+
+#### Touch and Validate
+
+The `touch()` method marks fields as "touched" without triggering validation. You may then validate all touched fields by calling `validate()` without arguments. The `touched()` helper checks if a field has been touched. The `reset()` method clears the touched state for reset fields.
+
+<CodeGroup>
+
+```vue Vue icon="vuejs"
+<input v-model="form.name" @blur="form.touch('name')" />
+<input v-model="form.email" @blur="form.touch('email')" />
+
+<button type="button" @click="form.validate()">Validate Touched Fields</button>
+
+<p v-if="form.touched('name')">Name has been touched</p>
+```
+
+```jsx React icon="react"
+<input value={data.name} onChange={e => setData('name', e.target.value)} onBlur={() => touch('name')} />
+<input value={data.email} onChange={e => setData('email', e.target.value)} onBlur={() => touch('email')} />
+
+<button type="button" onClick={() => validate()}>Validate Touched Fields</button>
+
+{touched('name') && <p>Name has been touched</p>}
+```
+
+```svelte Svelte icon="s"
+<input bind:value={$form.name} on:blur={() => $form.touch('name')} />
+<input bind:value={$form.email} on:blur={() => $form.touch('email')} />
+
+<button type="button" on:click={() => $form.validate()}>Validate Touched Fields</button>
+
+{#if $form.touched('name')}
+    <p>Name has been touched</p>
+{/if}
+```
+
+</CodeGroup>
+
+#### Options
+
+Validation requests are automatically debounced (1500ms by default). You may customize this timeout using `setValidationTimeout()`.
+
+<CodeGroup>
+
+```js Vue icon="vuejs"
+const form = useForm('post', '/users', {
+    name: '',
+}).setValidationTimeout(500)
+```
+
+```js React icon="react"
+const form = useForm('post', '/users', {
+    name: '',
+})
+
+form.setValidationTimeout(500)
+```
+
+```js Svelte icon="s"
+const form = useForm('post', '/users', {
+    name: '',
+})
+
+$form.setValidationTimeout(500)
+```
+
+</CodeGroup>
+
+By default, files are excluded from validation requests to avoid unnecessary uploads. You may enable file validation using `validateFiles()`.
+
+<CodeGroup>
+
+```js Vue icon="vuejs"
+const form = useForm('post', '/users', {
+    avatar: null,
+}).validateFiles()
+```
+
+```js React icon="react"
+const form = useForm('post', '/users', {
+    avatar: null,
+})
+
+form.validateFiles()
+```
+
+```js Svelte icon="s"
+const form = useForm('post', '/users', {
+    avatar: null,
+})
+
+$form.validateFiles()
+```
+
+</CodeGroup>
+
+By default, validation errors are simplified to strings (the first error message). You may keep errors as arrays using `withAllErrors()`.
+
+<CodeGroup>
+
+```js Vue icon="vuejs"
+const form = useForm('post', '/users', {
+    name: '',
+}).withAllErrors()
+```
+
+```js React icon="react"
+const form = useForm('post', '/users', {
+    name: '',
+})
+
+form.withAllErrors()
+```
+
+```js Svelte icon="s"
+const form = useForm('post', '/users', {
+    name: '',
+})
+
+$form.withAllErrors()
+```
+
+</CodeGroup>
+
+With Precognition enabled, you may call `submit()` without arguments to submit to the configured endpoint.
+
 ## Server-Side Responses
 
 When using Inertia, you don't typically inspect form responses client-side like you would with traditional XHR/fetch requests. Instead, your server-side route or controller issues a [redirect](/v2/the-basics/redirects) response after processing the form, often redirecting to a success page.

From e3399254cf8c968f9d078251a908ed36a85390fb Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Fri, 28 Nov 2025 07:51:49 +0100
Subject: [PATCH 2/6] Update the-protocol.mdx

---
 v2/core-concepts/the-protocol.mdx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/v2/core-concepts/the-protocol.mdx b/v2/core-concepts/the-protocol.mdx
index bf01c7f..5e7fe06 100644
--- a/v2/core-concepts/the-protocol.mdx
+++ b/v2/core-concepts/the-protocol.mdx
@@ -169,6 +169,20 @@ The following headers should be sent by your server-side adapter in Inertia resp
   Set to `X-Inertia` to help browsers correctly differentiate between HTML and JSON responses.
 </ParamField>
 
+The following headers are used for [Precognition](/v2/the-basics/forms#precognition) validation responses.
+
+<ParamField header="Precognition" type="string">
+  Set to `true` to indicate this is a Precognition validation response.
+</ParamField>
+
+<ParamField header="Precognition-Success" type="string">
+  Set to `true` when validation passes with no errors, combined with a `204 No Content` status code.
+</ParamField>
+
+<ParamField header="Vary" type="string">
+  Set to `Precognition` on all responses when the Precognition middleware is applied.
+</ParamField>
+
 ## The Page Object
 
 Inertia shares data between the server and client via a page object. This object includes the necessary information required to render the page component, update the browser's history state, and track the site's asset version. The page object can include the following properties:

From f40340eb331b3c3b1127fad4b775314f50923d7e Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Fri, 28 Nov 2025 08:15:39 +0100
Subject: [PATCH 3/6] Update forms.mdx

---
 v2/the-basics/forms.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/the-basics/forms.mdx b/v2/the-basics/forms.mdx
index 39aecde..33602a9 100644
--- a/v2/the-basics/forms.mdx
+++ b/v2/the-basics/forms.mdx
@@ -2201,7 +2201,7 @@ The `touch()` method marks fields as "touched" without triggering validation. Yo
 
 #### Options
 
-Validation requests are automatically debounced (1500ms by default). You may customize this timeout using `setValidationTimeout()`.
+Validation requests are automatically debounced. The first request fires immediately, then subsequent changes are debounced (1500ms by default). You may customize this timeout using `setValidationTimeout()`.
 
 <CodeGroup>
 

From e8a9320f6990c72ff4bffb963e8adad4facfe5f1 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Fri, 28 Nov 2025 09:28:59 +0100
Subject: [PATCH 4/6] Update forms.mdx

---
 v2/the-basics/forms.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/v2/the-basics/forms.mdx b/v2/the-basics/forms.mdx
index 33602a9..eea7d99 100644
--- a/v2/the-basics/forms.mdx
+++ b/v2/the-basics/forms.mdx
@@ -1308,19 +1308,19 @@ Validation requests are automatically debounced. The first request fires immedia
 <CodeGroup>
 
 ```vue Vue icon="vuejs"
-<Form action="/users" method="post" :validate-timeout="500">
+<Form action="/users" method="post" :validation-timeout="500">
     <!-- ... -->
 </Form>
 ```
 
 ```jsx React icon="react"
-<Form action="/users" method="post" validateTimeout={500}>
+<Form action="/users" method="post" validationTimeout={500}>
     {/* ... */}
 </Form>
 ```
 
 ```svelte Svelte icon="s"
-<Form action="/users" method="post" validateTimeout={500}>
+<Form action="/users" method="post" validationTimeout={500}>
     <!-- ... -->
 </Form>
 ```

From 93452828e3ad2a113beab4fcb2329f55c785f8e1 Mon Sep 17 00:00:00 2001
From: Taylor Otwell <taylor@laravel.com>
Date: Sat, 6 Dec 2025 14:23:03 -0600
Subject: [PATCH 5/6] Update forms.mdx

---
 v2/the-basics/forms.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/the-basics/forms.mdx b/v2/the-basics/forms.mdx
index eea7d99..621e089 100644
--- a/v2/the-basics/forms.mdx
+++ b/v2/the-basics/forms.mdx
@@ -2257,7 +2257,7 @@ $form.validateFiles()
 
 </CodeGroup>
 
-By default, validation errors are simplified to strings (the first error message). You may keep errors as arrays using `withAllErrors()`.
+By default, validation errors are simplified to strings (the first error message). You can indicate you would like all errors as arrays using `withAllErrors()`.
 
 <CodeGroup>
 

From 2e80598e39ef99c2fccad92e884650ac9eda971f Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Wed, 10 Dec 2025 17:25:21 +0100
Subject: [PATCH 6/6] Update forms.mdx

---
 v2/the-basics/forms.mdx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/v2/the-basics/forms.mdx b/v2/the-basics/forms.mdx
index 621e089..7c99275 100644
--- a/v2/the-basics/forms.mdx
+++ b/v2/the-basics/forms.mdx
@@ -956,6 +956,8 @@ In React and Vue, refs provide access to all form methods and reactive state. In
 
 ### Precognition
 
+<Badge>v2.3+</Badge>
+
 The `<Form>` component includes built-in support for [Laravel Precognition](https://laravel.com/docs/precognition), enabling real-time form validation without duplicating your server-side validation rules on the client.
 
 <Note>
@@ -1984,8 +1986,14 @@ form.submit(store())
 
 ### Precognition
 
+<Badge>v2.3+</Badge>
+
 Just like the `<Form>` component, the `useForm` helper supports [Precognition](#precognition) for real-time validation. You may enable it by chaining the `withPrecognition()` method with the HTTP method and endpoint for validation requests.
 
+<Note>
+Precognition requires server-side support. Laravel users should see the [Laravel Precognition documentation](https://laravel.com/docs/precognition) for setup instructions. For other frameworks, see the [protocol page](/v2/core-concepts/the-protocol#request-headers) for implementation details.
+</Note>
+
 <CodeGroup>
 
 ```js Vue icon="vuejs"
@@ -2026,6 +2034,10 @@ const form = useForm('post', '/users', {
 })
 ```
 
+<Tip>
+Since Precognition is now built-in, you may remove the `laravel-precognition` package and import `useForm` from your Inertia adapter instead.
+</Tip>
+
 You may also use [Wayfinder](https://github.com/laravel/wayfinder) when enabling Precognition.
 
 ```js