react-hook-form Set error message for custom validation when using useController

Question

I'm using useController for my text inputs, but I'm not able to set an error message for a custom validation. I assumed I would be able to use an object with value/message similar to the built in validations, but I get the error TypeError: validateFunction is not a function if I try to do this.

This works fine:

<TextInput
                control={control}
                name={`email`}
                label={`Email *`}
                rules={{
                    required:true,
                    validate: {
                        checkEmail: v => validateEmail(v)
                    }
                }}
            />

What I want to do:

<TextInput
                control={control}
                name={`email`}
                label={`Email *`}
                rules={{
                    required:true,
                    validate: {
                        checkEmail: {
                            value: v => validateEmail(v),
                            message: 'Invalid email'
                        }
                    }
                }}
            />

My TextInput component currently looks like this:

import style from "./form.module.scss"
import classnames from "classnames";
import { useController, useForm } from "react-hook-form";

export default function TextInput(props){

    const {
        field: { ref, ...inputProps },
        fieldState: { invalid, isTouched, isDirty },
        formState: { touchedFields, dirtyFields, errors }
    } = useController({
        name: props.name,
        control: props.control,
        rules: props.rules,
        defaultValue: props.defaultValue ? props.defaultValue : '',
    });


    return(
        <div className={classnames(style.fieldItem, {[style.error]: invalid})}>
            <label className={style.label}>{props.label}</label>
            <input
                className={style.textInput}
                inputRef={ref}
                type={`text`}
                placeholder={props.placeholder}
                {...inputProps}
            />
            {invalid &&
                <div className={style.message}>{`Invalid input`}</div>
            }
        </div>
    );

}

How can I set an error message for custom validations when using this approach?

knoefel · Accepted Answer · 2021-07-08 11:23:44Z

21

For a custom validation using validate you have to pass the error message directly:

<TextInput
  control={control}
  name={`email`}
  label={`Email *`}
  rules={{
    required:true,
    validate: {
      checkEmail: v => validateEmail(v) || "ERROR MESSAGE"
    }
  }}
/>

You can read about it in this section about register as register and <Controller /> or useController are using the same rules interface.

answered Jul 8, 2021 at 11:23

knoefel

7,0383 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Torc Over a year ago

I feel like this should be included in the official docs. I could only find this sort of note for the required prop : react-hook-form.com/api/useform/register

Collectives™ on Stack Overflow

react-hook-form Set error message for custom validation when using useController

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related