Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Custom Validation Functions | Form Submission and Core Validation
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
React Forms with React Hook Form

bookCustom Validation Functions

When working with forms in React Hook Form, you sometimes encounter situations where the built-in validation rulesβ€”such as required, minLength, or patternβ€”are not enough to capture the complexity of your requirements. In these cases, you can use the validate option to supply your own custom validation function. This flexibility allows you to handle advanced scenarios like cross-field validation, asynchronous checks, or enforcing business logic that cannot be expressed with standard rules.

To write a custom validation function, you add a validate property to your field registration. This property can be a single function or an object with multiple validation functions. The function receives the field value as its argument and should return true if the value is valid, or a string error message if it is not. Here is how you might use validate for a password confirmation field:

const {
  register,
  handleSubmit,
  watch,
  formState: { errors }
} = useForm();

const password = watch("password");

<input
  type="password"
  {...register("confirmPassword", {
    validate: value =>
      value === password || "Passwords do not match"
  })}
/>
{errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}

In this example, the custom validation function checks if the confirmPassword matches the password field. If it does not, it returns an error message that will be displayed to the user.

You should consider using custom validation functions when your validation needs go beyond what is possible with the built-in rules. This includes cases such as:

  • Comparing values between multiple fields;
  • Validating complex input formats not covered by regular expressions;
  • Checking against external data sources, such as verifying if a username is already taken;
  • Enforcing business logic that cannot be reduced to a simple rule.

However, for simple requirements like checking if a field is required, has a minimum length, or matches a pattern, you should stick to the built-in rules for better readability and performance. Custom validation functions are most valuable when you need to implement logic that is unique to your application's needs.

question mark

When should you use a custom validation function with the validate option in React Hook Form instead of relying on built-in rules?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how to handle asynchronous validation with React Hook Form?

What are some best practices for writing custom validation functions?

Can you show an example of cross-field validation for more than two fields?

bookCustom Validation Functions

Swipe to show menu

When working with forms in React Hook Form, you sometimes encounter situations where the built-in validation rulesβ€”such as required, minLength, or patternβ€”are not enough to capture the complexity of your requirements. In these cases, you can use the validate option to supply your own custom validation function. This flexibility allows you to handle advanced scenarios like cross-field validation, asynchronous checks, or enforcing business logic that cannot be expressed with standard rules.

To write a custom validation function, you add a validate property to your field registration. This property can be a single function or an object with multiple validation functions. The function receives the field value as its argument and should return true if the value is valid, or a string error message if it is not. Here is how you might use validate for a password confirmation field:

const {
  register,
  handleSubmit,
  watch,
  formState: { errors }
} = useForm();

const password = watch("password");

<input
  type="password"
  {...register("confirmPassword", {
    validate: value =>
      value === password || "Passwords do not match"
  })}
/>
{errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}

In this example, the custom validation function checks if the confirmPassword matches the password field. If it does not, it returns an error message that will be displayed to the user.

You should consider using custom validation functions when your validation needs go beyond what is possible with the built-in rules. This includes cases such as:

  • Comparing values between multiple fields;
  • Validating complex input formats not covered by regular expressions;
  • Checking against external data sources, such as verifying if a username is already taken;
  • Enforcing business logic that cannot be reduced to a simple rule.

However, for simple requirements like checking if a field is required, has a minimum length, or matches a pattern, you should stick to the built-in rules for better readability and performance. Custom validation functions are most valuable when you need to implement logic that is unique to your application's needs.

question mark

When should you use a custom validation function with the validate option in React Hook Form instead of relying on built-in rules?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 3
some-alt