Można stworzyć własną funkcję walidującą w React Hook Form przy użyciu kontrolera (Controller), który pozwala na łatwe zarządzanie wartością pola wejściowego. Aby stworzyć kontroler z niestandardową funkcją walidującą, można użyć atrybutu validate obiektu rules w Controller.
Przykładowa implementacja niestandardowej funkcji walidującej z kontrolerem może wyglądać następująco:
import { useForm, Controller } from "react-hook-form";
function validateUsername(username) {
if (!username) {
return "Nazwa użytkownika jest wymagana";
}
if (username.length < 3) {
return "Nazwa użytkownika musi zawierać przynajmniej 3 znaki";
}
return true;
}
export default function App() {
const { control, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>Nazwa użytkownika:</label>
<Controller
name="username"
control={control}
rules={{ validate: validateUsername }}
render={({ field }) => <input {...field} />}
/>
{errors.username && <p>{errors.username.message}</p>}
<button type="submit">Wyślij</button>
</form>
);
}
W powyższym przykładzie, kontroler jest użyty do zarządzania wartością pola username. W obiekcie rules przypisujemy atrybut validate, a w nim naszą niestandardową funkcję walidującą validateUsername.
Następnie w elemencie Controller przekazujemy obiekt field do pola input za pomocą rozproszenia (spread operator). Komunikat błędu można wyświetlić w elemencie p za pomocą errors.username.message.
Warto zauważyć, że funkcja walidująca musi zwracać true lub ciąg znaków z komunikatem błędu. Jeśli zwrócony zostanie ciąg znaków, to zostanie on przypisany do właściwości message w obiekcie błędu, który można wykorzystać do wyświetlenia komunikatu błędu w formularzu.