Skip to content
On this page

setError

Sets an error to a field programmatically, and consequently invalidate the form.

Demo

Coming soon...

Usage

Invalidate the form on group validations

vue
<template>
  <form>
    <input type="text" v-bind="register('name')" />
    <input type="text" v-bind="register('email')" />
    <input type="text" v-bind="register('password')" />
    <input type="text" v-bind="register('password_confirmation')" />
    <button type="submit">Submit</button>
  </form>
</template>
<script setup lang="ts">
import { useFormHandler, Interceptor } from 'vue-form-handler'

const sleep = (milliseconds: number) => {
  return new Promise((resolve) => setTimeout(resolve, milliseconds))
}

//validate your fields here
const validateFieldGroup = async () => {
  await sleep(1000)
  return Math.random() < 0.5
}

const interceptor: Interceptor = async ({ name, setError, clearError }) => {
  if (['name', 'email'].includes(name)) {
    ;(await validateUser())
      ? clearError(name)
      : setError('user', 'User already exists')
  }
  return true
}

const { register } = useFormHandler({ interceptor })
</script>

Notice how we use the combination of clearError and setError in order to invalidate the form when we have some fields that need to be validated together and the error is not scoped to one single field but to the whole field group.

Type Declarations

ts
export type SetError = (name: keyof T, error: string) => void

Released under the MIT License.