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.

vue

<script setup lang="ts">
import { revalidateLogic, useForm } from '@tanstack/vue-form'

// ...

const form = useForm({
  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
    },
  },
})
</script>

<script setup lang="ts">
import { revalidateLogic, useForm } from '@tanstack/vue-form'

// ...

const form = useForm({
  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
    },
  },
})
</script>

Standardmäßig wird onDynamic nicht aufgerufen. Sie müssen also revalidateLogic() an die Option validationLogic von useForm ü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.

vue

<script setup lang="ts">
const form = useForm({
  // ...
  validationLogic: revalidateLogic({
    mode: 'submit',
    modeAfterSubmission: 'blur',
  }),
  // ...
})
</script>

<script setup lang="ts">
const form = useForm({
  // ...
  validationLogic: revalidateLogic({
    mode: 'submit',
    modeAfterSubmission: 'blur',
  }),
  // ...
})
</script>

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.

vue

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

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

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

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

Verwendung mit anderer Validierungslogik

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

vue

<script setup lang="ts">
import { revalidateLogic, useForm } from '@tanstack/vue-form'

const form = useForm({
  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>

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

<script setup lang="ts">
import { revalidateLogic, useForm } from '@tanstack/vue-form'

const form = useForm({
  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>

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

Verwendung mit Feldern

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

vue

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

<template>
  <form
    @submit="
      (e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }
    "
  >
    <form.Field
      name="age"
      :validators="{
        onDynamic: ({ value }) =>
          value > 18 ? undefined : 'Age must be greater than 18',
      }"
    >
      <template v-slot="{ field }">
        <div>
          <input
            type="number"
            :value="field.state.value"
            @input="
              (e) =>
                field.handleChange((e.target as HTMLInputElement).valueAsNumber)
            "
            @blur="field.handleBlur"
          />
          <p style="color: red">
            {{ field.state.meta.errorMap.onDynamic }}
          </p>
        </div>
      </template>
    </form.Field>
    <button type="submit">Submit</button>
  </form>
</template>

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

<template>
  <form
    @submit="
      (e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }
    "
  >
    <form.Field
      name="age"
      :validators="{
        onDynamic: ({ value }) =>
          value > 18 ? undefined : 'Age must be greater than 18',
      }"
    >
      <template v-slot="{ field }">
        <div>
          <input
            type="number"
            :value="field.state.value"
            @input="
              (e) =>
                field.handleChange((e.target as HTMLInputElement).valueAsNumber)
            "
            @blur="field.handleBlur"
          />
          <p style="color: red">
            {{ field.state.meta.errorMap.onDynamic }}
          </p>
        </div>
      </template>
    </form.Field>
    <button type="submit">Submit</button>
  </form>
</template>

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.

vue

<script setup lang="ts">
const form = useForm({
  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' }
    },
  },
})
</script>

<script setup lang="ts">
const form = useForm({
  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' }
    },
  },
})
</script>

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.

vue

<script setup lang="ts">
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 = useForm({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: schema,
  },
})
</script>

<script setup lang="ts">
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 = useForm({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: schema,
  },
})
</script>