Dynamische Validierung

In vielen Fällen möchten Sie die Validierungsregeln basierend auf dem Zustand des Formulars oder anderen Bedingungen ändern. Das beliebteste Beispiel dafür ist, wenn Sie ein Feld anders validieren möchten, je nachdem, ob der Benutzer das Formular zum ersten Mal übermittelt hat oder nicht.

Wir unterstützen dies durch unsere onDynamic Validierungsfunktion.

import { revalidateLogic, createForm } from '@tanstack/svelte-form'

// ...

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  // If this is omitted, onDynamic will not be called
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: ({ value }) => {
      if (!value.firstName) {
        return { firstName: 'A first name is required' }
      }
      return undefined
    },
  },
}))

import { revalidateLogic, createForm } from '@tanstack/svelte-form'

// ...

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  // If this is omitted, onDynamic will not be called
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: ({ value }) => {
      if (!value.firstName) {
        return { firstName: 'A first name is required' }
      }
      return undefined
    },
  },
}))

Standardmäßig wird onDynamic nicht aufgerufen. Sie müssen daher revalidateLogic() an die Option validationLogic von createForm übergeben.

Revalidierungsoptionen

revalidateLogic ermöglicht es Ihnen anzugeben, wann die Validierung ausgeführt werden soll und die Validierungsregeln dynamisch basierend auf dem aktuellen Übermittlungsstatus des Formulars zu ändern.

Es nimmt zwei Argumente entgegen

mode: Der Validierungsmodus vor der ersten Formularübermittlung. Dies kann einer der folgenden sein:
- change: Validieren bei jeder Änderung.
- blur: Validieren beim Verlassen des Feldes (Blur).
- submit: Validieren bei Übermittlung. (Standard)
modeAfterSubmission: Der Validierungsmodus, nachdem das Formular übermittelt wurde. Dies kann einer der folgenden sein:
- change: Validieren bei jeder Änderung. (Standard)
- blur: Validieren beim Verlassen des Feldes (Blur).
- submit: Validieren bei Übermittlung.

Sie können beispielsweise das Folgende verwenden, um nach der ersten Übermittlung beim Verlassen des Feldes neu zu validieren.

const form = createForm(() => ({
  // ...
  validationLogic: revalidateLogic({
    mode: 'submit',
    modeAfterSubmission: 'blur',
  }),
  // ...
}))

const form = createForm(() => ({
  // ...
  validationLogic: revalidateLogic({
    mode: 'submit',
    modeAfterSubmission: 'blur',
  }),
  // ...
}))

Zugriff auf Fehler

So wie Sie auf Fehler von einer onChange oder onBlur Validierung zugreifen, können Sie auf die Fehler der onDynamic Validierungsfunktion über das form.state.errorMap Objekt zugreifen.

svelte

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<p>{form.state.errorMap.onDynamic?.firstName}</p>

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<p>{form.state.errorMap.onDynamic?.firstName}</p>

Verwendung mit anderer Validierungslogik

Sie können die onDynamic Validierung neben anderer Validierungslogik verwenden, wie z. B. onChange oder onBlur.

svelte

<script lang="ts">
  import { revalidateLogic, createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onChange: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
      onDynamic: ({ value }) => {
        if (!value.lastName) {
          return { lastName: 'A last name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<div>
  <p>{form.state.errorMap.onChange?.firstName}</p>
  <p>{form.state.errorMap.onDynamic?.lastName}</p>
</div>

<script lang="ts">
  import { revalidateLogic, createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onChange: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
      onDynamic: ({ value }) => {
        if (!value.lastName) {
          return { lastName: 'A last name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<div>
  <p>{form.state.errorMap.onChange?.firstName}</p>
  <p>{form.state.errorMap.onDynamic?.lastName}</p>
</div>

Verwendung mit Feldern

Sie können die onDynamic Validierung auch mit Feldern verwenden, genau wie Sie es mit anderer Validierungslogik tun würden.

svelte

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  }))
</script>

<form
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field
    name={'age'}
    validators={{
      onDynamic: ({ value }) =>
        value > 18 ? undefined : 'Age must be greater than 18',
    }}
  >
    {#snippet children(field)}
      <div>
        <input
          type="number"
          onchange={(e) => field.handleChange(e.target.valueAsNumber)}
          onblur={field.handleBlur}
          value={field.state.value}
        />
        <p style="color: red">
          {field.state.meta.errorMap.onDynamic}
        </p>
      </div>
    {/snippet}
  </form.Field>
  <button type="submit">Submit</button>
</form>

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  }))
</script>

<form
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field
    name={'age'}
    validators={{
      onDynamic: ({ value }) =>
        value > 18 ? undefined : 'Age must be greater than 18',
    }}
  >
    {#snippet children(field)}
      <div>
        <input
          type="number"
          onchange={(e) => field.handleChange(e.target.valueAsNumber)}
          onblur={field.handleBlur}
          value={field.state.value}
        />
        <p style="color: red">
          {field.state.meta.errorMap.onDynamic}
        </p>
      </div>
    {/snippet}
  </form.Field>
  <button type="submit">Submit</button>
</form>

Asynchrone Validierung

Asynchrone Validierung kann auch mit onDynamic verwendet werden, genau wie mit anderer Validierungslogik. Sie können die asynchrone Validierung sogar verzögern (debounce), um übermäßige Aufrufe zu vermeiden.

const form = createForm(() => ({
  defaultValues: {
    username: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
    onDynamicAsync: async ({ value }) => {
      if (!value.username) {
        return { username: 'Username is required' }
      }
      // Simulate an async validation
      const isValid = await validateUsername(value.username)
      return isValid ? undefined : { username: 'Username is already taken' }
    },
  },
}))

const form = createForm(() => ({
  defaultValues: {
    username: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
    onDynamicAsync: async ({ value }) => {
      if (!value.username) {
        return { username: 'Username is required' }
      }
      // Simulate an async validation
      const isValid = await validateUsername(value.username)
      return isValid ? undefined : { username: 'Username is already taken' }
    },
  },
}))

Standard-Schema-Validierung

Sie können auch Standard-Schema-Validierungsbibliotheken wie Valibot oder Zod mit der onDynamic Validierung verwenden. Dies ermöglicht es Ihnen, komplexe Validierungsregeln zu definieren, die sich dynamisch basierend auf dem Formularzustand ändern können.

import { z } from 'zod'

const schema = z.object({
  firstName: z.string().min(1, 'A first name is required'),
  lastName: z.string().min(1, 'A last name is required'),
})

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: schema,
  },
}))

import { z } from 'zod'

const schema = z.object({
  firstName: z.string().min(1, 'A first name is required'),
  lastName: z.string().min(1, 'A last name is required'),
})

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: schema,
  },
}))

Revalidierungsoptionen

Zugriff auf Fehler

Verwendung mit anderer Validierungslogik

Verwendung mit Feldern

Asynchrone Validierung

Standard-Schema-Validierung

Bytes abonnieren

Bytes abonnieren