Validation

You can find full example at StackBlitz.

You can find full list of validation rules in createForm - register rules section.

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

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

  const onSubmit = (values) => {
    console.log(values)
  }

  return (
    <FormProvider form={form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("email", {
            required: "Required",
            pattern: {
              value: /^[^@]+@[^@]+.[^@]+$/,  // your email regex
              message: "Invalid email"
            }
          })}
        />

        <pre>{JSON.stringify(errors, null, 2)}</pre>

        <button type="submit">Save</button>
      </form>
    </FormProvider>
  )
}

Don't forget to display an accessible error message:

<input
  {...register("email", {
    required: "Required",
    pattern: {
      value: /^[^@]+@[^@]+.[^@]+$/, // your email regex
      message: "Invalid email"
    }
  })}
  aria-invalid={Boolean(errors.email)}
/>
{errors.email && <p role="alert">{errors.email.message}</p>}

When using TypeScript, define form values type and apply it to the form for additional type safety:

type ExampleFormValues = {
  email: string;
}

const ExampleForm = () => {
  const form = createForm<ExampleFormValues>({
    defaultValues: {
      email: ""
    }
  })
}