Utilizing Formik alongside Yup and React-select for enhanced validation

Question

Utilizing Formik alongside Yup and React-select for enhanced validation

Currently, I am implementing form validation in a React project using both Yup and Formik. The challenge I am facing is with validating a react-select element within the form. To achieve this, I am utilizing the validationSchema property of Formik to validate the form upon value changes. The specific issue I'm encountering is that while the select field is functioning correctly, the validation error message persists even after correction. My main query revolves around how to effectively validate the select field using my current method.

Below is an abbreviated version of the code sample I am working on.

<!-- Code Sample Goes Here -->

You can also view the live example on Codesandbox:

https://codesandbox.io/s/throbbing-shadow-6f6yw?fontsize=14

Note: This is one of my early experiences with Reactjs.

reactjs material-ui react-select formik yup

Answer 1

Answer №1

Update

handleChange("year")(selectedOption.value);

In order to successfully update the Formik value for the year field, it is necessary to call the handleChange() function with the selected option's value. This approach allows for updating the Formik state as intended.

An easy way to identify and resolve such issues is by outputting the Formik props using the following code snippet:

<pre>{JSON.stringify(props, null, 2)}</pre>

For a practical demonstration, refer to this sandbox example. By relying solely on the Formik state, you can eliminate the need for a custom year state. It is advisable to manipulate values using only the Formik state, ensuring that when saving, only the year component needs to be extracted due to react-select utilizing the entire object by default.

Answer 2

Update

handleChange("year")(selectedOption.value);

In order to successfully update the Formik value for the year field, it is necessary to call the handleChange() function with the selected option's value. This approach allows for updating the Formik state as intended.

An easy way to identify and resolve such issues is by outputting the Formik props using the following code snippet:

<pre>{JSON.stringify(props, null, 2)}</pre>

For a practical demonstration, refer to this sandbox example. By relying solely on the Formik state, you can eliminate the need for a custom year state. It is advisable to manipulate values using only the Formik state, ensuring that when saving, only the year component needs to be extracted due to react-select utilizing the entire object by default.

Answer 3

Answer №2

To trick Formik into recognizing this as an event, you can use the handleChange function provided by Formik. This method can also be applied to other input field types like react-color or a datepicker.

validationSchema = yup.object({
  year_value: yup.object().required('Year value is required.')
})

<Select 
  className=""
  name="year_value"
  id="year_value"
  placeholder='Choose year value'
  value={values.year_value}
  onBlur={handleBlur}
  onChange={selectedOption => {
    let event = {target: {name: 'year_value', value: selectedOption}}
    handleChange(event)
  }}
  onBlur={() => {
    handleBlur({target: {name: 'year_value'}});
  }}
  options={yearOptions}
/>

Answer 4

To trick Formik into recognizing this as an event, you can use the handleChange function provided by Formik. This method can also be applied to other input field types like react-color or a datepicker.

validationSchema = yup.object({
  year_value: yup.object().required('Year value is required.')
})

<Select 
  className=""
  name="year_value"
  id="year_value"
  placeholder='Choose year value'
  value={values.year_value}
  onBlur={handleBlur}
  onChange={selectedOption => {
    let event = {target: {name: 'year_value', value: selectedOption}}
    handleChange(event)
  }}
  onBlur={() => {
    handleBlur({target: {name: 'year_value'}});
  }}
  options={yearOptions}
/>

Answer 5

Answer №3

If anyone is seeking solutions for this issue in the future, here's a different method to retrieve the selected value as a string from react-select while still utilizing Yup for validation on the select input:

By using the helpers function from useField(), you can manage the value, touched state, and errors of a "Field". This is particularly useful when dealing with elements like react-select that are not traditional inputs.

function EnhancedSelectComponent(...props) {
  const [field, meta, helpers] = useField(name="mySelectInput"); // You can also pass 'props' into useField if they contain a name attribute
  const { setValue, setTouched, setError } = helpers;

  const updateFieldProps = (selectedOption) => {
      setValue(selectedOption.value);
      setTouched(true);
      setError(undefined);
  }

  return (
        <Select onChange={selectedOption => updateFieldProps(selectedOption)} />
  );
};

Answer 6

If anyone is seeking solutions for this issue in the future, here's a different method to retrieve the selected value as a string from react-select while still utilizing Yup for validation on the select input:

By using the helpers function from useField(), you can manage the value, touched state, and errors of a "Field". This is particularly useful when dealing with elements like react-select that are not traditional inputs.

function EnhancedSelectComponent(...props) {
  const [field, meta, helpers] = useField(name="mySelectInput"); // You can also pass 'props' into useField if they contain a name attribute
  const { setValue, setTouched, setError } = helpers;

  const updateFieldProps = (selectedOption) => {
      setValue(selectedOption.value);
      setTouched(true);
      setError(undefined);
  }

  return (
        <Select onChange={selectedOption => updateFieldProps(selectedOption)} />
  );
};

Answer 7

Answer №4

To address my issue, I implemented the following solution:

Firstly, include the necessary imports at the beginning of your code:

import Select from 'react-select';
import { Formik, Form, Field } from 'formik';

Next, integrate this code snippet into your JSX render section:

<Formik
      initialValues={initialUserAddData}
      validationSchema={addUserValidationSchema}
      onSubmit={handleAddUser}
    >
      {({ errors }) => (
        <Form className="add-edit-user-form">
          <Field name="department">
            {({ field, form }) => (
               <Select
                 className="select-wrap"
                 classNamePrefix="select-box"
                 options={department}
                 onChange={(selectedOption) =>
                     form.setFieldValue(
                       'department',
                       selectedOption.value,
                      )
                    }
               />
            )}
         </Field>
         {errors.department && (
           <span className="error">{errors.department}</span>
         )}
       </Form>
      )}
 </Formik>

This example showcases how to utilize react-select in conjunction with formik to update values during form validation. Alternatively, you can also employ the useFormik hook for similar functionality, although this offers a distinct approach.

Answer 8

To address my issue, I implemented the following solution:

Firstly, include the necessary imports at the beginning of your code:

import Select from 'react-select';
import { Formik, Form, Field } from 'formik';

Next, integrate this code snippet into your JSX render section:

<Formik
      initialValues={initialUserAddData}
      validationSchema={addUserValidationSchema}
      onSubmit={handleAddUser}
    >
      {({ errors }) => (
        <Form className="add-edit-user-form">
          <Field name="department">
            {({ field, form }) => (
               <Select
                 className="select-wrap"
                 classNamePrefix="select-box"
                 options={department}
                 onChange={(selectedOption) =>
                     form.setFieldValue(
                       'department',
                       selectedOption.value,
                      )
                    }
               />
            )}
         </Field>
         {errors.department && (
           <span className="error">{errors.department}</span>
         )}
       </Form>
      )}
 </Formik>

This example showcases how to utilize react-select in conjunction with formik to update values during form validation. Alternatively, you can also employ the useFormik hook for similar functionality, although this offers a distinct approach.

Answer 9

Answer №5

If I were to choose, I'd opt for Formik select over react select in the following manner:

    const initialValues = {
        firstName: "",
        lastName: ""
    };

    const validationSchema = Yup.object().shape({
      firstName: Yup.string().required("First name is required"),
      lastName: Yup.string().required("Last name is required")
    });

<Field as="select" name="lastName" id="lastName">
    <option value="" label="">
    Select Your Last Name{" "}
    </option>
    {lastNameOptions.map(item => 
       <option value={item.value} label={item.label}>{item.value}</option>
   )} 
</Field>

Utilize the map function on the options array to generate options dynamically

Answer 10

If I were to choose, I'd opt for Formik select over react select in the following manner:

    const initialValues = {
        firstName: "",
        lastName: ""
    };

    const validationSchema = Yup.object().shape({
      firstName: Yup.string().required("First name is required"),
      lastName: Yup.string().required("Last name is required")
    });

<Field as="select" name="lastName" id="lastName">
    <option value="" label="">
    Select Your Last Name{" "}
    </option>
    {lastNameOptions.map(item => 
       <option value={item.value} label={item.label}>{item.value}</option>
   )} 
</Field>

Utilize the map function on the options array to generate options dynamically

Answer 11

Answer №6

If you're still on the hunt for a solution, look no further. This should do the trick.

Start by creating your own custom component using the Select component.

import Select from "react-select";

export default function CustomSelect({ onChange, options, value, name, className = "" }) {
    const defaultValue = (options, value) => {
        return options ? options.find((option) => option.value === value) : "";
    };

    return (
        <div>
            <Select
                className={className}
                name={name}
                value={defaultValue(options, value)}
                onChange={(value) => {
                    onChange(value);
                }}
                options={options}
            />
        </div>
    );
}

Next, import your custom component and use it as shown below. Be sure to utilize setFieldTouched and setFieldValue from formik props to properly set and validate the form.

<CustomSelect
   name="name"
   value={"value"}
   options={options}
   onChange={(option) => {
   setFieldTouched("name", true);
   setFieldValue("name", option.value);
   }}
/>

Answer 12

If you're still on the hunt for a solution, look no further. This should do the trick.

Start by creating your own custom component using the Select component.

import Select from "react-select";

export default function CustomSelect({ onChange, options, value, name, className = "" }) {
    const defaultValue = (options, value) => {
        return options ? options.find((option) => option.value === value) : "";
    };

    return (
        <div>
            <Select
                className={className}
                name={name}
                value={defaultValue(options, value)}
                onChange={(value) => {
                    onChange(value);
                }}
                options={options}
            />
        </div>
    );
}

Next, import your custom component and use it as shown below. Be sure to utilize setFieldTouched and setFieldValue from formik props to properly set and validate the form.

<CustomSelect
   name="name"
   value={"value"}
   options={options}
   onChange={(option) => {
   setFieldTouched("name", true);
   setFieldValue("name", option.value);
   }}
/>

Utilizing Formik alongside Yup and React-select for enhanced validation

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Building a Skybox Material using Shader Graph in Unity3D

Mastering the art of theming components using styled-components and Material-UI

Having trouble viewing the images that were uploaded with Multer using React, Node.js, Sequelize, and PostgreSQL

The error message "TypeError: Trying to access properties of an undefined object (reading '800')" is being displayed

What is the best way to display a downshift + popper above a material-ui dialog?

Day Change Triggers React [Native] View Update

Next.js fails to load TailwindCSS

Having issues with stripe payments in my ReactJS application

Switch up primary and secondary color schemes with the Material UI Theme swap

Can we include an option to display all pages in one row on a single page?

How do I insert commas between cells in a React Material-Table populated from a fetched array?

A strategy for targeting the Material UI TextField with useRef hooks while a button is activated

Transfer the updated variable from a static JavaScript file to Next.js

combining the package.json files of the client and server into a single file

When integrating react-hook-form with Material-UI TextField in a form, an error occurs stating that "TypeError: e.target is undefined" when

The user fails to be redirected following wallet authentication in NextJS

The directory "Users/node_modules/crypto-browserify" is not a valid directory in react

Animated collapse with margin effect in Material-UI

Session is being established by Express/Passport, however, the cookie is not being transmitted to the

Exploring ways to implement authentication by leveraging Redux state variables