Async Validation

Give error feedback to a user after server-side validation.

You can find full example at StackBlitz.

Set validation error manually after server response:

import { createForm } from 'solid-hook-form'
import { createSignal } from 'solid-js'

export const ExampleForm = () => {
  const form = createForm({
    defaultValues: {
      email: ''
    },
    mode: 'onChange'
  })
  const {
    errors,
    register,
    handleSubmit,
    setError
  } = form

  const [isLoading, setIsLoading] = createSignal(false)

  const onSubmit = (values: ExampleFormValues) => {
    setIsLoading(true)

    fetch('/api/validation')
      .then(response => {
        if (response.status !== 200) {
          setError('email', {
            type: 'custom',
            message: 'This email is already in use'
          })
        }
      })
      .finally(() => {
        setIsLoading(false)
      })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Email</label>
      <input {...register('email', { required: 'Required' })} />
      {errors.email && <p role="alert">{errors.email.message}</p>}

      {isLoading() && <p>Loading...</p>}

      <Button type="submit" disabled={isLoading()}>
        Save
      </Button>
    </form>
  )
}