Własna funkcja walidująca w React Hook Form

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.

Kategorie