title: How to validate individual element of an array of JSON objects using Yup
body: <p>I have a JSON object which contains an array of JSON objects. My need is out of 2 array elements (vehicles), I just need to ensure that at least one is filled with data i.e. both can't be empty.. see my declaration below and my Yum schema</p>
  <pre><code> const initialValues = {
    applicantID: &quot;&quot;,
    applicantTypeID: &quot;1&quot;,
    firstName: &quot;&quot;,
    lastName: &quot;&quot;,
    email: &quot;user@abc.co&quot;,
    address1: &quot;&quot;,
    address2: &quot;&quot;,
    suburb: &quot;&quot;,
    state: &quot;AZ&quot;,
    postcode: &quot;&quot;,
    phone: &quot;&quot;,
    mobile: &quot;&quot;,
    business_unit_school: &quot;&quot;,
    building: &quot;&quot;,
    level: &quot;&quot;,
    room: &quot;&quot;,
    applicationStatusID: &quot;1&quot;,
    **vehicles: [
      { registrationNumber: &quot;&quot;, make: &quot;&quot;, model: &quot;&quot; },
      { registrationNumber: &quot;&quot;, make: &quot;&quot;, model: &quot;&quot; },
    ],**
    
  };
  
  const validationSchema = Yup.object({
    applicantID: Yup.string().required(&quot;Employee Number required.&quot;),
    firstName: Yup.string()
      .min(2, &quot;Too Short!&quot;)
      .max(30, &quot;Max 30 characters allowed.&quot;)
      .required(&quot;Firstname required.&quot;),
    lastName: Yup.string()
      .min(2, &quot;Too Short!&quot;)
      .max(30, &quot;Max 30 characters allowed.&quot;)
      .required(&quot;Lastname required.&quot;),
    email: Yup.string().email(&quot;Invalid email format&quot;).required(&quot;Email required.&quot;),
    address1: Yup.string()
      .min(2, &quot;Too short.&quot;)
      .max(255, &quot;Too Long!&quot;)
      .required(&quot;Address required.&quot;),
    address2: Yup.string().max(255, &quot;Max 255 characters allowed.&quot;),
    suburb: Yup.string()
      .min(2, &quot;Too Short!&quot;)
      .max(30, &quot;Max 30 characters allowed.&quot;)
      .required(&quot;Suburb required.&quot;),
    state: Yup.string()
      .min(2, &quot;Too Short!&quot;)
      .max(30, &quot;Max 30 characters allowed.&quot;)
      .required(&quot;State required.&quot;),
    business_unit_school: Yup.string()
      .min(2, &quot;Too Short!&quot;)
      .max(100, &quot;Max 100 characters allowed.&quot;)
      .required(&quot;Business unit required.&quot;),
    **vehicles: Yup.array().of(
      Yup.object().shape({
        registrationNumber: Yup.string().required(&quot;Required&quot;),
      })
    ),**
  postcode: Yup.string().required(&quot;Postcode required.&quot;),
    phone: Yup.number()
      .required(&quot;Phone number required&quot;)
      .typeError(&quot;You must specify a number&quot;),
    mobile: Yup.number().required(&quot;&quot;).typeError(&quot;You must specify a number&quot;),
  });
  </code></pre>
  <p>My above vehicles validation works though it forces user to fill in registrationNumber element of both array items under vehicle which is not I want. Any help would be much appreciated. I also tried below and it doesn't work ...</p>
  <pre><code>let vehicleschema = Yup.object({
    vehicles: Yup.array().of(
      Yup.object({
        registrationNumber: Yup.string().required(&quot;Required&quot;),
        make: Yup.string().required(&quot;Required&quot;),
      })
    ),
  });
  
  const validationSchema = Yup.object({
  vehicles: vehicleschema.validateAt(&quot;vehicles[0].registrationNumber&quot;, initialValues)
  }),
  </code></pre>
  <p>I get below error on validation ...</p>
  <pre><code>TypeError: field.resolve is not a function
  (anonymous function)
  node_modules/yup/es/object.js:146
    143 | 
    144 | innerOptions.path = makePath(_templateObject(), options.path, prop);
    145 | innerOptions.value = value[prop];
  &gt; 146 | field = field.resolve(innerOptions);
        | ^  147 | 
    148 | if (field._strip === true) {
    149 |   isChanged = isChanged || prop in value;
  View compiled
  ObjectSchema._cast
  node_modules/yup/es/object.js:136
    133 | });
    134 | 
    135 | var isChanged = false;
  &gt; 136 | props.forEach(function (prop) {
        | ^  137 |   var field = fields[prop];
    138 |   var exists = has(value, prop);
    139 | 
  </code></pre>
  <p>ok, after using Luis's solution below, it seems to validate registration numbers though I am now ended up with multiple error text. I am using Formik with Yup.. the Formik code is as per below ...</p>
  <pre><code>&lt;Grid
                container
                item
                lg={12}
                md={12}
                xs={12}
                spacing={15}
                name=&quot;vehicles&quot;
                style={{ marginBottom: &quot;-4em&quot; }}
              &gt;
                &lt;Box mx={3} my={2} textAlign=&quot;center&quot;&gt;
                  &lt;h2&gt;Vehicle Details&lt;/h2&gt;
                &lt;/Box&gt;
              &lt;/Grid&gt;
              &lt;Grid
                container
                item
                lg={12}
                md={12}
                xs={12}
                spacing={15}
                name=&quot;vehicles&quot;
                style={{ marginBottom: &quot;-4em&quot; }}
              &gt;&lt;/Grid&gt;
              {initialValues.vehicles.map((vehicle, index) =&gt; (
                &lt;Grid
                  container
                  item
                  lg={10}
                  md={12}
                  xs={12}
                  spacing={5}
                  justify=&quot;space-between&quot;
                  className={classes.rowSpacing}
                  key={index}
                &gt;
                  &lt;Grid item lg={3} md={5} xs={12}&gt;
                    &lt;Field
                      component={TextField}
                      fullWidth={true}
                      label=&quot;Registration Number&quot;
                      name={`vehicles[${index}].registrationNumber`}
                    /&gt;
                    &lt;FormHelperText error&gt;
                      &lt;ErrorMessage name=&quot;vehicles&quot; /&gt;
                    &lt;/FormHelperText&gt;
                  &lt;/Grid&gt;
  
                  &lt;Grid item lg={2} md={5} xs={12}&gt;
                    &lt;Field
                      component={TextField}
                      fullWidth={true}
                      label=&quot;Make&quot;
                      name={`vehicles[${index}].make`}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item lg={2} md={5} xs={12}&gt;
                    &lt;Field
                      component={TextField}
                      fullWidth={true}
                      label=&quot;Model&quot;
                      name={`vehicles[${index}].model`}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;br /&gt;
                &lt;/Grid&gt;
              ))}
            &lt;/Grid&gt;
  </code></pre>
  <p>see multiple error below ..error text <strong>&quot;at least one registration number is required&quot;</strong> getting repeated twice</p>
  <p><a href="https://i.stack.imgur.com/uQtzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uQtzm.png" alt="enter image description here" /></a></p>
  <p>Hi Luis that updated solution didn't work and it could be due to the fact that I use both Formik-material-ui and material-ui in my forms..see below.. to distinguish between two TextField elements, I am using alias of muiTextField here</p>
  <pre><code>import {TextField as muiTextField} from &quot;@material-ui/core&quot;;
  
  import { TextField, Select } from &quot;formik-material-ui&quot;;
  </code></pre>
  <p>below is my updated code ...</p>
  <pre><code>&lt;Grid item lg={3} md={5} xs={12}&gt;
                    &lt;Field
                      //component={TextField}
                      fullWidth={true}
                      label=&quot;Registration Number&quot;
                      name={`vehicles[${index}].registrationNumber`}
                      render={() =&gt; (
                        &lt;muiTextField
                           error={Boolean(errors.vehicles)}
                           helperText= {
                              errors.vehicles &amp;&amp; getVehiclesErrors(errors.vehicles)
                           }
                        /&gt;
                     )}
                    /&gt;
                    
                  &lt;/Grid&gt;
  </code></pre>
  <p>The formik-material-ui is just a wrapper around common material-ui elements. I am curious as to why you have 'email' reference in the getVehicleErrors() function. is that a typo? After I updated my code (as per above) here muiTextField refers to the TextField of material-ui, now I see no vehicle registration fields on my form..see below</p>
  <p><a href="https://i.stack.imgur.com/W4RVb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W4RVb.png" alt="enter image description here" /></a></p>
  <p>Managed to fix the issue with below changes....</p>
  <pre><code>    const getVehiclesErrors = (errors) =&gt; {
      return Array.isArray(errors)
        ? errors.filter((registrationNumber, i, arr) =&gt; arr.indexOf(registrationNumber) === i)
        : errors;
    }; 
  
  
  
  &lt;Grid item lg={3} md={5} xs={12}&gt;
                        &lt;Field
                          component={TextField}
                          fullWidth={true}
                          label=&quot;Registration Number&quot;
                          name={`vehicles[${index}].registrationNumber`}
                        /&gt;
                        {errors.vehicles &amp;&amp; touched.vehicles ? (
                          &lt;div style={{ color: &quot;red&quot; }}&gt;
                            {getVehiclesErrors(errors.vehicles)}
                          &lt;/div&gt;
                        ) : null}
                      &lt;/Grid&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/LLFCl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LLFCl.png" alt="enter image description here" /></a></p>