setError

This function allows you to manually set one or more errors.

(name: string, error: FieldError, options?: SetErrorOptions) => void

Props

Name	Type	Description
name	string	Input's name.
error	FieldError	Set an error with its type and message.
options.shouldFocus	boolean	Should focus the input during setting an error. This only works when the input's reference is registered.

Rules

This method will not persist the associated input error if the input passes register's associated rules.
An error that is not associated with an input field will be persisted until cleared with clearErrors.
Can be useful in the handleSubmit method when you want to give error feedback to a user after async validation (for instance API returns validation errors).

import { createForm } from "solid-hook-form"

export const ExampleForm = () => {
  const form = createForm({
    defaultValues: {
      email: ""
    }
  })
  const { formState, register, handleSubmit, setError } = form
  const { errors } = formState

  const onSubmit = async (values) => {
    const response = await fetch("/api/validate", {
      method: "POST",
      body: JSON.stringify(values)
    })

    if (response.status !== 200) {
      setError("email", {
        type: response.status.toString()
        message: "This email is already in use"
      })
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Email</label>
      <input
        {...register("email")}
        aria-invalid={Boolean(errors.email)}
      />

      {errors.email && (
        <p role="alert">{errors.email.message}</p>
      )}

      <button type="submit">Submit</button>
    </form>
  )
}