Błąd walidacji w React Hook Form

W React Hook Form można ręcznie ustawić błąd walidacji dla określonej kontrolki formularza za pomocą metody setError. Ta metoda jest dostępna z obiektu, który jest zwrócony przez funkcję useController i umożliwia programowe ustawienie błędu dla określonej kontrolki formularza.

Oto przykład:

				
					import { useController } from "react-hook-form";
 
const MyForm = () => {
  const { register, handleSubmit, setError } = useController({
    defaultValues: {
      customField: "",
    },
  });
 
  const validateForm = (data) => {
    if (!data.customField) {
      setError("customField", {
        type: "manual",
        message: "This field is required",
      });
    }
  };
 
  const onSubmit = (data) => {
    validateForm(data);
    console.log(data);
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="customField" ref={register} />
      <button type="submit">Submit</button>
    </form>
  );
};

W powyższym przykładzie funkcja validateForm jest wywoływana przed wysłaniem formularza i sprawdza, czy pole customField jest wypełnione. W razie potrzeby można ustawić błąd dla tego pola za pomocą metody setError.

Kategorie