[0.3.x] Allow fields to be manually touched (#26)

* allow fields to be manually touched

* Ensure old data and touched aren't updated till response is received

* wip

* wip

* wip

* wip

* Allow validate without input

Author: timacdonald

packages/alpine/src/index.ts

@@ -92,10 +92,19 @@ export default function (Alpine: TAlpine) {
             touched(name) {
                 return state.touched.includes(name)
             },
+            touch(name) {
+                validator.touch(name)
+
+                return form
+            },
             validate(name) {
-                name = resolveName(name)
+                if (typeof name === 'undefined') {
+                    validator.validate()
+                } else {
+                    name = resolveName(name)
 
-                validator.validate(name, get(form.data(), name))
+                    validator.validate(name, get(form.data(), name))
+                }
 
                 return form
             },

packages/alpine/src/types.ts

@@ -4,12 +4,13 @@ export interface Form<Data extends Record<string, unknown>> {
     processing: boolean,
     validating: boolean,
     touched(name: string): boolean,
+    touch(name: string|NamedInputEvent|Array<string>): Data&Form<Data>,
     data(): Data,
     errors: Record<string, string>,
     hasErrors: boolean,
     valid(name: string): boolean,
     invalid(name: string): boolean,
-    validate(name: string|NamedInputEvent): Data&Form<Data>,
+    validate(name?: string|NamedInputEvent): Data&Form<Data>,
     setErrors(errors: SimpleValidationErrors|ValidationErrors): Data&Form<Data>
     forgetError(name: string|NamedInputEvent): Data&Form<Data>
     setValidationTimeout(duration: number): Data&Form<Data>,

packages/core/src/types.ts

@@ -25,6 +25,7 @@ export type Config = AxiosRequestConfig&{
 
 interface RevalidatePayload {
     data: Record<string, unknown>|null,
+    touched: Array<string>,
 }
 
 export type ValidationConfig = Config&{
@@ -49,7 +50,8 @@ export interface Client {
 
 export interface Validator {
     touched(): Array<string>,
-    validate(input: string|NamedInputEvent, value: unknown): Validator,
+    validate(input?: string|NamedInputEvent, value?: unknown): Validator,
+    touch(input: string|NamedInputEvent|Array<string>): Validator,
     validating(): boolean,
     valid(): Array<string>,
     errors(): ValidationErrors,

packages/core/src/validator.ts

@@ -118,6 +118,21 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
      */
     let oldData = initialData
 
+    /**
+     * The data currently being validated.
+     */
+    let validatingData: null|Record<string, unknown> = null
+
+    /**
+     * The old touched.
+     */
+    let oldTouched: string[] = []
+
+    /**
+     * The touched currently being validated.
+     */
+    let validatingTouched: null|string[] = null
+
     /**
      * Create a debounced validation callback.
      */
@@ -167,9 +182,9 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
                     : response
             },
             onBefore: () => {
-                const beforeValidationResult = (config.onBeforeValidation ?? ((newRequest, oldRequest) => {
-                    return ! isequal(newRequest, oldRequest)
-                }))({ data }, { data: oldData })
+                const beforeValidationResult = (config.onBeforeValidation ?? ((previous, next) => {
+                    return ! isequal(previous, next)
+                }))({ data, touched }, { data: oldData, touched: oldTouched })
 
                 if (beforeValidationResult === false) {
                     return false
@@ -181,7 +196,9 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
                     return false
                 }
 
-                oldData = data
+                validatingTouched = touched
+
+                validatingData = data
 
                 return true
             },
@@ -191,7 +208,13 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
                 (config.onStart ?? (() => null))()
             },
             onFinish: () => {
-                setValidating(false);
+                setValidating(false)
+
+                oldTouched = validatingTouched!
+
+                oldData = validatingData!
+
+                validatingTouched = validatingData = null;
 
                 (config.onFinish ?? (() => null))()
             },
@@ -201,7 +224,13 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
     /**
      * Validate the given input.
      */
-    const validate = (name: string|NamedInputEvent, value: unknown) => {
+    const validate = (name?: string|NamedInputEvent, value?: unknown) => {
+        if (typeof name === 'undefined') {
+            validator()
+
+            return
+        }
+
         if (isFile(value) && !validateFiles) {
             console.warn('Precognition file validation is not active. Call the "validateFiles" function on your form to enable it.')
 
@@ -238,6 +267,15 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
 
             return form
         },
+        touch(input) {
+            const inputs = Array.isArray(input)
+                ? input
+                : [resolveName(input)]
+
+            setTouched([...touched, ...inputs])
+
+            return form
+        },
         validating: () => validating,
         valid,
         errors: () => errors,

packages/core/tests/client.test.js

@@ -1,7 +1,6 @@
 import { it, vi, expect, beforeEach, afterEach } from 'vitest'
 import axios from 'axios'
 import { client } from '../src/index'
-import { createValidator } from '../src/validator'
 
 beforeEach(() => {
     vi.mock('axios')
@@ -455,66 +454,6 @@ it('does not create an abort controller when a cancelToken is provided', async (
     expect(config.signal).toBeUndefined()
 })
 
-it('revaldata when validate is called', async () => {
-    expect.assertions(4)
-
-    let requests = 0
-    axios.request.mockImplementation(() => {
-        requests++
-
-        return Promise.resolve({ headers: { precognition: 'true' } })
-    })
-    let data
-    const validator = createValidator((client) => client.post('/foo', data))
-
-    expect(requests).toBe(0)
-
-    data = { name: 'Tim' }
-    validator.validate('name', 'Tim')
-    expect(requests).toBe(1)
-    vi.advanceTimersByTime(1500)
-
-    data = { name: 'Jess' }
-    validator.validate('name', 'Jess')
-    expect(requests).toBe(2)
-    vi.advanceTimersByTime(1500)
-
-    data = { name: 'Taylor' }
-    validator.validate('name', 'Taylor')
-    expect(requests).toBe(3)
-    vi.advanceTimersByTime(1500)
-})
-
-it('does not revaldata when data is unchanged', async () => {
-    expect.assertions(4)
-
-    let requests = 0
-    axios.request.mockImplementation(() => {
-        requests++
-
-        return Promise.resolve({ headers: { precognition: 'true' } })
-    })
-    let data = {}
-    const validator = createValidator((client) => client.post('/foo', data))
-
-    expect(requests).toBe(0)
-
-    data = { first: true }
-    validator.validate('name', true)
-    expect(requests).toBe(1)
-    vi.advanceTimersByTime(1500)
-
-    data = { first: true }
-    validator.validate('name', true)
-    expect(requests).toBe(1)
-    vi.advanceTimersByTime(1500)
-
-    data = { second: true }
-    validator.validate('name', true)
-    expect(requests).toBe(2)
-    vi.advanceTimersByTime(1500)
-})
-
 it('overrides request method url with config url', async () => {
     expect.assertions(5)
 

packages/core/tests/validator.test.js

@@ -60,16 +60,19 @@ it('does not revalidate data when data is unchanged', async () => {
 
     data = { first: true }
     validator.validate('name', true)
+    await vi.runAllTimersAsync()
     expect(requests).toBe(1)
     vi.advanceTimersByTime(1500)
 
     data = { first: true }
     validator.validate('name', true)
+    await vi.runAllTimersAsync()
     expect(requests).toBe(1)
     vi.advanceTimersByTime(1500)
 
     data = { second: true }
     validator.validate('name', true)
+    await vi.runAllTimersAsync()
     expect(requests).toBe(2)
     vi.advanceTimersByTime(1500)
 })
@@ -377,3 +380,59 @@ it('does mark fields as validated on success status', async () => {
     expect(validator.valid()).toEqual(['app'])
     expect(onValidatedChangedCalledTimes).toEqual(1)
 })
+
+it('can mark fields as touched', () => {
+    const validator = createValidator((client) => client.post('/foo', data))
+
+    validator.touch('name')
+    expect(validator.touched()).toEqual(['name'])
+
+    validator.touch(['foo', 'bar'])
+    expect(validator.touched()).toEqual(['name', 'foo', 'bar'])
+})
+
+it('revalidates when touched changes', async () => {
+    expect.assertions(1)
+
+    let requests = 0
+    let resolvers = []
+    let promises = []
+    let configs = []
+    axios.request.mockImplementation((c) => {
+        requests++
+        configs.push(c)
+
+        const promise = new Promise(resolve => {
+            resolvers.push(resolve)
+        })
+
+        promises.push(promise)
+
+        return promise
+    })
+    let data = { version: '10' }
+    const validator = createValidator((client) => client.post('/foo', data))
+
+    data = { app: 'Laravel' }
+    validator.validate('app', 'Laravel')
+    validator.touch('version')
+    validator.validate('app', 'Laravel')
+    vi.advanceTimersByTime(2000)
+    expect(requests).toBe(2)
+})
+
+it('can validate without needing to specify a field', async () => {
+    expect.assertions(1)
+
+    let requests = 0
+    axios.request.mockImplementation(() => {
+        requests++
+
+        return Promise.resolve({ headers: { precognition: 'true' } })
+    })
+    let data = { name: 'Tim', framework: 'Laravel' }
+    const validator = createValidator((client) => client.post('/foo', data))
+
+    validator.touch(['name', 'framework']).validate()
+    expect(requests).toBe(1)
+})

packages/react-inertia/src/index.ts

@@ -65,6 +65,11 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
     const form = Object.assign(inertiaForm, {
         validating: precognitiveForm.validating,
         touched: precognitiveForm.touched,
+        touch(name: Array<string>|string|NamedInputEvent) {
+            precognitiveForm.touch(name)
+
+            return form
+        },
         valid: precognitiveForm.valid,
         invalid: precognitiveForm.invalid,
         setData(key: any, value?: any) {
@@ -111,7 +116,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
 
             return form
         },
-        validate(name: string|NamedInputEvent) {
+        validate(name?: string|NamedInputEvent) {
             precognitiveForm.setData(inertiaForm.data)
 
             precognitiveForm.validate(name)

packages/react/src/index.ts

@@ -138,11 +138,20 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         touched(name) {
             return touched.includes(name)
         },
+        touch(name) {
+            validator.current!.touch(name)
+
+            return form
+        },
         validate(name) {
-            // @ts-expect-error
-            name = resolveName(name)
+            if (typeof name === 'undefined') {
+                validator.current!.validate()
+            } else {
+                // @ts-expect-error
+                name = resolveName(name)
 
-            validator.current!.validate(name, get(payload.current, name))
+                validator.current!.validate(name, get(payload.current, name))
+            }
 
             return form
         },

packages/react/src/types.ts

@@ -4,13 +4,14 @@ export interface Form<Data extends Record<string, unknown>> {
     processing: boolean,
     validating: boolean,
     touched(name: keyof Data): boolean,
+    touch(name: string|NamedInputEvent|Array<string>): Form<Data>,
     data: Data,
     setData(key: Data|keyof Data, value?: unknown): Form<Data>,
     errors: Partial<Record<keyof Data, string>>,
     hasErrors: boolean,
     valid(name: keyof Data): boolean,
     invalid(name: keyof Data): boolean,
-    validate(name: keyof Data|NamedInputEvent): Form<Data>,
+    validate(name?: keyof Data|NamedInputEvent): Form<Data>,
     setErrors(errors: Partial<Record<keyof Data, string|string[]>>): Form<Data>
     forgetError(string: keyof Data|NamedInputEvent): Form<Data>
     setValidationTimeout(duration: number): Form<Data>,

packages/vue-inertia/src/index.ts

@@ -53,6 +53,11 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
     const form = Object.assign(inertiaForm, {
         validating: precognitiveForm.validating,
         touched: precognitiveForm.touched,
+        touch(name: Array<string>|string|NamedInputEvent) {
+            precognitiveForm.touch(name)
+
+            return form
+        },
         valid: precognitiveForm.valid,
         invalid: precognitiveForm.invalid,
         clearErrors(...names: string[]) {
@@ -92,7 +97,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
 
             return form
         },
-        validate(name: string|NamedInputEvent) {
+        validate(name?: string|NamedInputEvent) {
             precognitiveForm.setData(inertiaForm.data())
 
             precognitiveForm.validate(name)