Creating a Yup field that is an object and making it required when another field is set to true in the validation process

Just getting started with Yup validation and I'm facing an issue. I am attempting to make certain fields required based on a condition. Specifically, I want the digital object to be required only if hasDigital is true; otherwise, it should be optional. However, no matter what I try, the validation always states that digital.pages is required even when hasDigital is false.

I have attempted to remove the required tag from hasDigital but the problem persists. Any help would be greatly appreciated. Thank you in advance!

const validationSchema = Yup.object({
  hasDigital: Yup.boolean().required(),
  digital: Yup.object({
    pages: Yup.number().required(),
    price: Yup.number().required()
  }).when("hasDigital", {
      is: true,
      then: Yup.object().required(),
      otherwise: Yup.object().optional()})
})
javascriptformsvalidationyup

Answer №1

I encountered a similar issue, and here's how I resolved it!

const onlineData = yup.object().shape({
  pages: yup.number().required(),
  price: yup.number().required(),
});

const schemaValidation = yup.object().shape({
  hasOnline: yup.boolean().required(),
  onlineContent: yup.object().when('hasOnline', {
    is: true,
    then: onlineData,
  }),
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble downloading the compression webpack plugin using npm, as it keeps throwing an error

Hey there, this message pops up when attempting to execute the following command: npm install compression-webpack-plugin Here is the accompanying error: `PS D:\phaser games\game-slot-machine> npm install compression-webpack-plugin npm ERR! ...

javascriptnpmwebpackwebpack-dev-serverphaser-framework

What is the best way to add animation to my `<div>` elements when my website is first loaded?

I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the wea ...

javascriptjqueryhtmlcss

Changes made to one order's information can impact the information of another order

Currently, I am in the process of developing a unique shopping cart feature where users input a number and a corresponding product is added to a display list. Users have the ability to adjust both the price and quantity of the products, with the total pric ...

javascriptangulartypescript

Combining various API requests within a Vue component, which includes a for loop

I'm delving into the world of API chaining, specifically trying to link two different API calls within a 'notes' Vue component. My knowledge of promises is basic at best, but I'm eager to enhance my skills in this area. The initial API ...

javascriptvue.jspromisevuexes6-promise

Odd behavior of the "for in" loop in Node.js

It seems like I'm struggling with the use of the "for in" statement. When working with a JSON document retrieved from a mongodb query (using nodejs + mongoose), its structure looks something like this: [{ "_id":"596f2f2ffbf8ab12bc8e5ee7", "da ...

javascriptarraysnode.jsmongodbfor-in-loop

Setting the default value in setState in React Native allows you to initialize state

const fetchData = async (key) => { try { const jsonData = await AsyncStorage.getItem(key) return jsonData != null ? JSON.parse(jsonData) : false; } catch(error) { console.log(error); } } useEffect ...

javascriptreactjsreact-nativeexpo

What could be causing the change event to be triggered in a v-text-field when I press enter, despite not making any changes?

How come the @change event triggers in a v-text-field when I press enter, even if I haven't made any changes? HTML <div id="app"> <v-app> <v-content> <v-container> <v-text-field @change=" ...

javascriptvue.jsvuetify.js

Validation of default values in contact forms

Obtained a free contact form online and hoping it works flawlessly, but struggling with validation for fields like "Full Name" in JS and PHP. Here is the HTML code: <input type="text" name="contactname" id="contactname" class="required" role="inpu ...

phpjavascripthtml

Retrieving a list of numbers separated by commas from an array

Currently, I'm retrieving data from a MYSQL database by executing the following SQL command: SELECT GROUP_CONCAT(MemberMemberId SEPARATOR ',') AS MemberMemberId FROM member_events WHERE event_date = "2000-01-01" AND Eve ...

javascriptreactjsexpresssequelize.js

Using the v-for directive before applying the Vue directive

I need help with displaying images in a carousel from data fetched via Firebase. I have created a directive, but the problem lies with the v-for loop. The directive is executed before the v-for loop, resulting in no items in the carousel. Directive: di ...

javascriptvue.jsvuejs2

Sending a JavaScript variable to a Ruby on Rails controller for passing it to an API for further processing

My index.html file contains a Google API map implementation. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body { height: ...

javascriptruby-on-railsapigoogle-maps-api-3uber-api

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

javascriptjqueryhtmlcss

Retrieve the unfinished user input from React's Material UI Autocomplete

I've implemented Material UI's Autocomplete input with react-hook-form as shown below: import React from "react"; import {Controller} from "react-hook-form"; import {Autocomplete} from "@mui/material"; export const ...

javascriptreactjsmaterial-uireact-hook-form

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

I am attempting to load various sounds (.mp3 audio) on separate audio players that are displayed on a single HTML page. The number of players displayed on the screen is determined by the length of the array. In this specific example, I have 3 elements in t ...

javascripthtmlcssaudio

What is the best method for showcasing numerous dropdown lists using JavaScript along with conditional if-else statements?

Hello everyone, I am currently new to javascript and I'm attempting to build a small web application using javascript. However, I am facing an issue with printing the drop-down list output. Could someone please assist me in resolving this problem? < ...

javascripthtmlif-statement

How to properly align TableHeader and TableBody contents in a Material-UI table

I am experiencing an issue with a file that is supposed to display a table of data pulled from a database. Although the table does appear, all the data seems to be displayed under the ISSUE NUMBER column, instead of being aligned with their respective col ...

javascriptnode.jsreactjsmaterial-ui

Prevent a submit button from submitting a form using jQuery

I am working on developing a password manager similar to a chrome extension. The goal is to detect the username and password fields when a user tries to log in to a website, such as Facebook, and then prompt the user if they would like to save these creden ...

javascriptjquerygoogle-chrome-extension

Re-activate external script following a language update in Next.js

In my Next.js 13 app, I have implemented a live chat support button that is dynamically added based on the language selection. The code for rendering the button looks like this: import Script from 'next/script'; ... <div id={`onlinehelp-button ...

javascriptreactjsnext.jsnext.js13

Setting up an SSL certificate for an Express application: A step-by-step guide

I am currently trying to set up my Express server in order to pass the SSL certificate and transition from http to https. After going through the Express documentation, I still haven't been able to find a suitable solution. While some suggestions lik ...

javascriptnode.jsexpresshttps

Transform objects into arrays

Is there a way to transform an object into an array of objects while adding new keys and values? This is my current object: { "0": "Ann_B", "1": "Billy_P", "2": "Carly_C", "3": "David_L" } I would like it to look like this: [ { "value": "Ann_B ...

javascriptarraysreactjsobject