react-hook-form custom validation message not showing - reactjs

Question

I'm using react-hook-form 6.8.2 with React 16.13.1 and normal validation works as expected, but not when inside of the "validate" key.
const { trigger, formState, watch, reset } = useFormContext({
mode: 'all',
});
--
ref={register({
required: 'This is required',
minLength: {
value: 3,
message: 'Length must be 3 or more',
},
validate: {
always: (value) => value === 1 || 'This should almost always trigger',
},
maxLength: {
value: 5,
message: 'max 5',
},
})}
required, minLength and maxLength all work, but always doesn't.
I have tried this:
always: (value) => value === 1 || console.log('This should almost always trigger') which logs the error in the console
and I have tried this: validate: (value) => value === 1 || 'This should almost always trigger' which does nothing either
Why isn't the validation message shown in the UI?

Answer 1

I made a CodeSandbox with your requirements using react-hook-form#6.8.2 and react#16.13.1 also using RHF's useFormContext hook. It's working fine, have a look:
One thing that isn't correct in your example code: you're passing the useForm config options to the useFormContext hook. That isn't working, you have to pass them instead to your useForm call. Check the CodeSandbox to see how to set the mode to 'all'.

Answer 2

Turns out that there was a custom error rendering class, hidden deep within our own library for input fields, that didn't account for custom error types.
:(

Answer 3

In: V7
Instead of passing the register function's result to a ref, just call the register function with a spread operator on the input field. After this, you need a unique name for this input, just like for every input. In my example, your config works fine. https://codesandbox.io/s/react-hook-form-js-forked-js0il?file=/src/App.js
Leave this answer for someone who looking for a similar solution.

Answer 4

The validate function checks for your condition. If it returns false then the message can be displayed using the error mechanism like this:
import React from "react";
import { useForm } from "react-hook-form";
const Example = () => {
const { handleSubmit, register, errors } = useForm();
const onSubmit = values => console.log(values);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
{...register("username", {
validate: value => value !== "admin" || "Nice try!"
})}
/>
{errors.username && errors.username.message} //Here we display the error
<button type="submit">Submit</button>
</form>
);
};