Własny walidator w React Hook Form

Można stworzyć własny walidator w React Hook Form, używając funkcji „useController” i przekazując funkcję walidacji jako jedno z jego argumentów.

Oto przykład:

				
					import { useController } from "react-hook-form";
 
const MyCustomValidator = (value) => {
  if (value !== "expectedValue") {
    return {
      type: "custom",
      message: "Value must be equal to 'expectedValue'",
      ref: {},
    };
  }
 
  return true;
};
 
const MyForm = () => {
  const { register, handleSubmit, errors } = useController({
    defaultValues: {
      customField: "",
    },
    validateCriteriaMode: "firstError",
    validate: {
      customField: MyCustomValidator,
    },
  });
 
  const onSubmit = (data) => {
    console.log(data);
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="customField" ref={register} />
      {errors.customField && <p>{errors.customField.message}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

Funkcja walidatora powinna zwrócić wartość true w przypadku braku błędów lub obiekt zawierający informacje o błędzie (typ błędu, komunikat i referencję do kontrolki formularza). W powyższym przykładzie funkcja MyCustomValidator sprawdza, czy wartość pola jest równa „expectedValue”.

Kategorie