Support for Precognition in <Form> component

packages/core/package.json

@@ -54,7 +54,8 @@
   },
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
-    "axios": "^1.12.2",
+    "axios": "^1.13.1",
+    "laravel-precognition": "^0.7.3",
     "lodash-es": "^4.17.21",
     "qs": "^6.14.0"
   },

packages/core/src/resetFormFields.ts

@@ -161,8 +161,10 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
     return
   }
 
+  const resetEntireForm = !fieldNames || fieldNames.length === 0
+
   // If no specific fields provided, reset the entire form
-  if (!fieldNames || fieldNames.length === 0) {
+  if (resetEntireForm) {
     // Get all field names from both defaults and form elements (including disabled ones)
     const formData = new FormData(formElement)
     const formElementNames = Array.from(formElement.elements)
@@ -173,7 +175,7 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
 
   let hasChanged = false
 
-  fieldNames.forEach((fieldName) => {
+  fieldNames!.forEach((fieldName) => {
     const elements = formElement.elements.namedItem(fieldName)
 
     if (elements) {
@@ -184,7 +186,7 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
   })
 
   // Dispatch reset event if any field changed (matching native form.reset() behavior)
-  if (hasChanged) {
+  if (hasChanged && resetEntireForm) {
     formElement.dispatchEvent(new Event('reset', { bubbles: true }))
   }
 }

packages/core/src/types.ts

@@ -1,4 +1,5 @@
 import { AxiosProgressEvent, AxiosResponse } from 'axios'
+import { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition'
 import { Response } from './response'
 
 declare module 'axios' {
@@ -568,6 +569,9 @@ export type FormComponentProps = Partial<
   resetOnSuccess?: boolean | string[]
   resetOnError?: boolean | string[]
   setDefaultsOnSuccess?: boolean
+  validateFiles?: boolean
+  validateTimeout?: number
+  simpleValidationErrors?: boolean
 }
 
 export type FormComponentMethods = {
@@ -580,6 +584,11 @@ export type FormComponentMethods = {
   defaults: () => void
   getData: () => Record<string, FormDataConvertible>
   getFormData: () => FormData
+  valid: (field: string) => boolean
+  invalid: (field: string) => boolean
+  validate(field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig): void
+  touch: (...fields: string[]) => void
+  touched(field?: string): boolean
 }
 
 export type FormComponentonSubmitCompleteArguments = Pick<FormComponentMethods, 'reset' | 'defaults'>
@@ -592,6 +601,8 @@ export type FormComponentState = {
   wasSuccessful: boolean
   recentlySuccessful: boolean
   isDirty: boolean
+  validator: Validator
+  validating: boolean
 }
 
 export type FormComponentSlotProps = FormComponentMethods & FormComponentState

packages/react/package.json

@@ -54,7 +54,7 @@
   "devDependencies": {
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "axios": "^1.12.2",
+    "axios": "^1.13.1",
     "es-check": "^9.4.4",
     "esbuild": "^0.25.11",
     "esbuild-node-externals": "^1.18.0",
@@ -67,6 +67,7 @@
   "dependencies": {
     "@inertiajs/core": "workspace:*",
     "@types/lodash-es": "^4.17.12",
+    "laravel-precognition": "^0.7.3",
     "lodash-es": "^4.17.21"
   }
 }

packages/react/src/Form.ts

@@ -1,4 +1,5 @@
 import {
+  Errors,
   FormComponentProps,
   FormComponentRef,
   FormComponentSlotProps,
@@ -10,7 +11,15 @@ import {
   resetFormFields,
   VisitOptions,
 } from '@inertiajs/core'
-import { isEqual } from 'lodash-es'
+import {
+  createValidator,
+  NamedInputEvent,
+  resolveName,
+  toSimpleValidationErrors,
+  ValidationConfig,
+  Validator,
+} from 'laravel-precognition'
+import { get, isEqual } from 'lodash-es'
 import React, {
   createElement,
   FormEvent,
@@ -64,6 +73,9 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       resetOnSuccess = false,
       setDefaultsOnSuccess = false,
       invalidateCacheTags = [],
+      validateFiles = false,
+      validateTimeout = 1500,
+      simpleValidationErrors = true,
       children,
       ...props
     },
@@ -79,36 +91,128 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     const [isDirty, setIsDirty] = useState(false)
     const defaultData = useRef<FormData>(new FormData())
 
+    const [validating, setValidating] = useState(false)
+    const [valid, setValid] = useState<string[]>([])
+    const [touched, setTouched] = useState<string[]>([])
+
+    const [validator, setValidator] = useState<Validator>()
+
     const getFormData = (): FormData => new FormData(formElement.current)
 
     // Convert the FormData to an object because we can't compare two FormData
     // instances directly (which is needed for isDirty), mergeDataIntoQueryString()
     // expects an object, and submitting a FormData instance directly causes problems with nested objects.
     const getData = (): Record<string, FormDataConvertible> => formDataToObject(getFormData())
 
+    const getUrlAndData = (): [string, Record<string, FormDataConvertible>] => {
+      return mergeDataIntoQueryString(
+        resolvedMethod,
+        isUrlMethodPair(action) ? action.url : action,
+        getData(),
+        queryStringArrayFormat,
+      )
+    }
+
     const updateDirtyState = (event: Event) =>
       deferStateUpdate(() =>
         setIsDirty(event.type === 'reset' ? false : !isEqual(getData(), formDataToObject(defaultData.current))),
       )
 
+    const clearErrors = (...names: string[]) => {
+      form.clearErrors(...names)
+
+      if (names.length === 0) {
+        validator!.setErrors({})
+      } else {
+        names.forEach(validator!.forgetError)
+      }
+
+      return form
+    }
+
+    const getTransformedData = (): Record<string, FormDataConvertible> => {
+      const [_url, data] = getUrlAndData()
+      return transform(data)
+    }
+
     useEffect(() => {
       defaultData.current = getFormData()
 
       const formEvents: Array<keyof HTMLElementEventMap> = ['input', 'change', 'reset']
 
       formEvents.forEach((e) => formElement.current!.addEventListener(e, updateDirtyState))
 
-      return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
+      // Initialize validator
+      const newValidator = createValidator(
+        (client) =>
+          client[resolvedMethod](getUrlAndData()[0], getTransformedData(), {
+            headers,
+          }),
+        getTransformedData(),
+      )
+        .on('validatingChanged', () => {
+          setValidating(newValidator.validating())
+        })
+        .on('validatedChanged', () => {
+          setValid(newValidator.valid())
+        })
+        .on('touchedChanged', () => {
+          setTouched(newValidator.touched())
+        })
+        .on('errorsChanged', () => {
+          form.clearErrors()
+
+          const errors = simpleValidationErrors
+            ? toSimpleValidationErrors(newValidator.errors())
+            : newValidator.errors()
+
+          form.setError(errors as Errors)
+
+          setValid(newValidator.valid())
+        })
+
+      newValidator.setTimeout(validateTimeout)
+
+      if (validateFiles) {
+        newValidator.validateFiles()
+      }
+
+      setValidator(newValidator)
+
+      return () => {
+        formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
+      }
     }, [])
 
+    const validate = (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => {
+      if (typeof field === 'object' && !('target' in field)) {
+        config = field
+        field = undefined
+      }
+
+      if (typeof field === 'undefined') {
+        validator!.validate(config)
+      } else {
+        field = resolveName(field)
+
+        validator!.validate(field, get(getTransformedData(), field), config)
+      }
+    }
+
+    useEffect(() => {
+      validator?.setTimeout(validateTimeout)
+    }, [validateTimeout, validator])
+
     const reset = (...fields: string[]) => {
       if (formElement.current) {
         resetFormFields(formElement.current, defaultData.current, fields)
       }
+
+      validator!.reset(...fields)
     }
 
     const resetAndClearErrors = (...fields: string[]) => {
-      form.clearErrors(...fields)
+      clearErrors(...fields)
       reset(...fields)
     }
 
@@ -125,12 +229,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     }
 
     const submit = () => {
-      const [url, _data] = mergeDataIntoQueryString(
-        resolvedMethod,
-        isUrlMethodPair(action) ? action.url : action,
-        getData(),
-        queryStringArrayFormat,
-      )
+      const [url, _data] = getUrlAndData()
 
       const submitOptions: FormSubmitOptions = {
         headers,
@@ -171,6 +270,18 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       setIsDirty(false)
     }
 
+    const touch = (...fields: string[]) => {
+      validator!.touch(fields)
+    }
+
+    const isTouched = (field?: string): boolean => {
+      if (typeof field === 'string') {
+        return touched.includes(field)
+      }
+
+      return touched.length > 0
+    }
+
     const exposed = () => ({
       errors: form.errors,
       hasErrors: form.hasErrors,
@@ -179,17 +290,26 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       wasSuccessful: form.wasSuccessful,
       recentlySuccessful: form.recentlySuccessful,
       isDirty,
-      clearErrors: form.clearErrors,
+      clearErrors,
       resetAndClearErrors,
       setError: form.setError,
       reset,
       submit,
       defaults,
       getData,
       getFormData,
+
+      // Precognition
+      validator: validator!,
+      validating,
+      valid: (field: string) => valid.includes(field),
+      invalid: (field: string) => form.errors[field] !== undefined,
+      validate,
+      touch,
+      touched: isTouched,
     })
 
-    useImperativeHandle(ref, exposed, [form, isDirty, submit])
+    useImperativeHandle(ref, exposed, [form, isDirty, submit, validating, valid, touched, touch, validator])
 
     return createElement(
       'form',

packages/react/test-app/Pages/FormComponent/Precognition.tsx

@@ -0,0 +1,29 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Form Precognition</h1>
+
+      <Form action="/form-component/precognition" method="post" validateTimeout={100}>
+        {({ invalid, errors, validate, valid, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+              {valid('name') && <p>Name is valid!</p>}
+            </div>
+
+            <div>
+              <input name="email" placeholder="Email" onBlur={() => validate('email')} />
+              {invalid('email') && <p>{errors.email}</p>}
+              {valid('email') && <p>Email is valid!</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}