Required Field Validation - Ensuring a Field is Mandatory Based on Property Length Exceeding 0

Question

Required Field Validation - Ensuring a Field is Mandatory Based on Property Length Exceeding 0

When dealing with a form that includes lists of countries and provinces, there are specific rules to follow:

The country field/select must be filled out (required).
If a user selects a country that has provinces, an API call will fetch the list of provinces.
If provinces exist for the selected country, the provinces field/select becomes required.
If no provinces are found for the selected country after the API call, the provinces field/select is not required.

I am currently developing this functionality using React Hooks...

const validationSchema = yup.object().shape({
    country: yup
      .object()
      .required(t("common.validation.field_required"))
      .nullable(),
    province: yup.object().when() // How to validate provinces to be required?
});


const [provinces, setProvinces] = useState<Province>([]);

const fetchProvinces = (country: Country) => {
 // Code for API fetch ...
 setProvinces(apiResult);
}

...
return (
 ...
 <Autocomplete id="countries-list" options={countriesList} onChange={fetchProvinces} ... />
 <Autocomplete id="provinces-list" options={provincesList} ... />
 ...
);

Is there a way to use YUP to make the provinces-list field mandatory only if there is content in the provinces property (provinces.length > 0)?

javascript reactjs typescript validation yup

Answer 1

Answer №1

After facing a dilemma, I came up with a clever workaround by introducing a fictitious property named hasProvinces while configuring the form properties. Once we choose a country with provinces, we flag hasProvinces as true. With the power of yup, I can now leverage the "when" clause. Here's an example:

interface MyForm {
   country: Country;
   hasProvinces: boolean;
   province: Province;
}
...

const validationSchema = yup.object().shape({
    country: yup
      .object()
      .required(t("common.validation.field_required"))
      .nullable(),
    hasProvinces: yup.boolean(),
    province: yup.object().when("hasProvinces", {
      is: true,
      then: yup
        .object()
        .required(t("common.validation.field_required"))
        .nullable(),
      otherwise: yup.object().notRequired().nullable(),
    })
});

const [countries, countriesList] = useState<Country[]>([]);
const [provinces, setProvinces] = useState<Province[]>([]);

const [formValues, setFormValues] = useState<MyForm>(initialFormValues);

const fetchProvinces = (country: Country) => {
 const provinces = ... // Code for API fetch

 if(provinces.length > 0){
    setFormValues({...formValues, hasProvinces: true});
    setProvinces(provinces);
 }else{
    setFormValues({...formValues, hasProvinces: false});
    setProvinces([]);
 }
}

...
return (
 ...
 <Autocomplete id="country" options={countriesList} onChange={fetchProvinces} ... />
 <Autocomplete id="province" options={provincesList} ... />
 ...
);

Answer 2

After facing a dilemma, I came up with a clever workaround by introducing a fictitious property named hasProvinces while configuring the form properties. Once we choose a country with provinces, we flag hasProvinces as true. With the power of yup, I can now leverage the "when" clause. Here's an example:

interface MyForm {
   country: Country;
   hasProvinces: boolean;
   province: Province;
}
...

const validationSchema = yup.object().shape({
    country: yup
      .object()
      .required(t("common.validation.field_required"))
      .nullable(),
    hasProvinces: yup.boolean(),
    province: yup.object().when("hasProvinces", {
      is: true,
      then: yup
        .object()
        .required(t("common.validation.field_required"))
        .nullable(),
      otherwise: yup.object().notRequired().nullable(),
    })
});

const [countries, countriesList] = useState<Country[]>([]);
const [provinces, setProvinces] = useState<Province[]>([]);

const [formValues, setFormValues] = useState<MyForm>(initialFormValues);

const fetchProvinces = (country: Country) => {
 const provinces = ... // Code for API fetch

 if(provinces.length > 0){
    setFormValues({...formValues, hasProvinces: true});
    setProvinces(provinces);
 }else{
    setFormValues({...formValues, hasProvinces: false});
    setProvinces([]);
 }
}

...
return (
 ...
 <Autocomplete id="country" options={countriesList} onChange={fetchProvinces} ... />
 <Autocomplete id="province" options={provincesList} ... />
 ...
);

Required Field Validation - Ensuring a Field is Mandatory Based on Property Length Exceeding 0

Answer №1

Similar questions

Using jQuery to display checkbox text even when it is not directly adjacent to the checkbox

Creating a unique LinearProgress component using React and MaterialUI with a beautiful

Change a Typescript class into a string representation, utilizing getter and setter methods in place of private variables

Ways to analyze users who have clicked a button

Guide to deploying a React application - paths requiring adjustments

Determine the instance's name as a string in JavaScript

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

The React Router Dom V6 triggers loaders as soon as the router is initialized

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

Why is it that I am unable to retrieve a value from useContext?

The CSS function imported from '@emotion/react' may encounter compatibility issues with styling components from Material-UI using the styled method

gRaphael - the struggle of animating a line chart

Creating interactive tabs within the HTML document with AngularJS

I am wondering if it is feasible for a POST route to invoke another POST route and retrieve the response ('res') from the second POST in Express using Node.js

Service function in Angular 2 is returning an undefined value

I am experiencing excessive paper skipping in my printer

Getting callback data from a function in the AWS SDK without using asynchronous methods

Strange occurrences with HTML image tags

Error in Next JS: Invalid element type provided. Expected a string for built-in components or a class/function for composite components

Enhancing collaboration: Seamlessly sharing interface/interface/model files in the integration of