React form hooks How to validate select option

In React, using form hooks for validating select options is a common and important feature that ensures user-provided information meets specified requirements. Here, I will introduce a popular approach to achieve this functionality by leveraging the react-hook-form library alongside yup for form validation.

Step 1: Install Required Libraries

First, verify that your project has installed react-hook-form and yup. This can be done using npm or yarn:

bash
npm install react-hook-form yup @hookform/resolvers

or

bash
yarn add react-hook-form yup @hookform/resolvers

Step 2: Create Form and Validation Schema

Next, import the necessary hooks and functions in your component, then define a validation schema:

javascript
import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers';

// Define form validation schema
const schema = yup.object().shape({
  favoriteColor: yup.string().required("Please select a color")
});

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="favoriteColor">Select your favorite color:</label>
      <select id="favoriteColor" {...register("favoriteColor")}>
        <option value="">Select color</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
      </select>
      {errors.favoriteColor && <p>{errors.favoriteColor.message}</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Step 3: Handle and Display Error Messages

In the above code, we have implemented a basic select form with three color options. We defined a validation schema using yup that mandates user selection of a color option. If the user fails to select any color and attempts to submit the form, yup will display an error message below the select box, prompting the user to choose an option.

Conclusion

Using react-hook-form and yup effectively validates select options, ensuring user-submitted data complies with requirements. This method is concise and efficient, particularly well-suited for modern web applications that require form validation.