Questions tagged [yup]

Yup is a JavaScript object schema validator and object parser based on Joi

Filter by
Sorted by
Tagged with
0 votes
0 answers
11 views

Yup validation of object with one of the values as array of itself, and another one with dynamic key

I have objects with the following interface: interface AttributeValue { L?: AttributeValue[] | undefined; M?: { [id: string]: AttributeValue } | undefined; } is it possible to use Yup to validate ...
Ken Tsoi's user avatar
  • 1,245
-1 votes
2 answers
46 views

How to use uuid as item ID when use useFormik in ReactJS?

I use useForm for submit my form in ReactJS. In useForm we define initialValues whith blank content. and for inputs we use values for example: value={formik.values.bookName} I want to assign for id ...
hhamidy's user avatar
  • 11
0 votes
0 answers
14 views

Validating Yup files uploads with typescript

I'm using yup and react-hook-form in typescript. And in my code I do this: const schema: yup.ObjectSchema<IUserEdit> = yup.object().shape({ file: yup.mixed(), username: yup.string().max(...
Kirill Stepankov's user avatar
0 votes
0 answers
21 views

The react hook form's yup resolver is upgraded and causes a type error

I upgraded the @hookform/resolvers version from 2.9.10 to 3.3.2, yup version from 0.32.11 to 1.3.2 and it stopped working. I am creating a generic function that wraps useForm import { DefaultValues, ...
yamatsum's user avatar
0 votes
0 answers
22 views

How do I render conditional validations based on child object values using Yup in React

I have an array of excludedNames. If userId.name is included in the array, state should be an optional field, else it is required. How do I build yup validation for this given that I am trying to use ....
myrdstom's user avatar
  • 166
1 vote
0 answers
20 views

Can I access values from one part of a Yup schema within another?

I have a Yup validation schema for a quiz application, where I define two separate parts: questions and results. Each part has its own validation rules. Is there a way to access the values from the ...
Jimmy Blundell's user avatar
0 votes
1 answer
47 views

Why does Formik never recognize my Ionic IonInput values?

I'm using Ionic 7, React 18, and Formik 2.4.5. Does Ionic work with Formik? I tried creating a very simple form with just a first and last name ... const MyComponent: React.FC<MyComponentProps>...
Dave's user avatar
  • 15.1k
0 votes
0 answers
15 views

how to set minimum amount of input field based on membership dropdown value

<Form.Label htmlFor="amount"> Amount <span className="text-danger">*</span> </Form.Label> <...
Nafeed Akram's user avatar
0 votes
1 answer
37 views

Cannot make when condition working with Yup validation schema

I'm having some troubles creating a schema validation with a condition using Yup : import { object, string, } from 'yup'; const formValidationSchema = () => object().shape({ someInput: string(...
Ellone's user avatar
  • 3,696
0 votes
0 answers
65 views

What is wrong with my Yup validation scheme?

I'm building a simple form using Formik and Yup. There are two dropdowns and two inputs. Model, unfortunately, must be nested the following way: securityQuestions: { questions: { 0: '', ...
Seva's user avatar
  • 665
1 vote
1 answer
54 views

Why am I getting an error in my Yup validation's is condition?

I am working on a TypeScript project where I am using Yup for form validation. I've encountered an issue with the when function and the is condition. TypeScript is throwing an error (TS2769) related ...
3aQaRyAn's user avatar
0 votes
0 answers
14 views

React-hook-form, react-tabs and yupResolver - TypeError: o[(intermediate value)(intermediate value)(intermediate value)] is not a function

I try to build a dynamic form with react-hook-form and yup by this cool guide: https://dev.to/franklin030601/dynamic-forms-with-react-hook-form-2ml8 i have this structure of data: export const tabs: ...
Tactic Sugar's user avatar
0 votes
0 answers
25 views

Why do I get the following error when I am adding schema to my Form: Uncaught (in promise) TypeError: branch is not a function

I am getting the following error when I am adding schema to my form, error: Uncaught (in promise) TypeError: branch is not a function Following is the yup based schema that I am adding to my form: ...
BATMAN_2008's user avatar
  • 2,869
0 votes
0 answers
16 views

Yup conditional validation based on request type

I have a field, that I only want to be required if the express.js request is a POST request. Is this something that is possible in Yup validation? const SampleSchema = object({ _id: mixed().required(...
jjyj's user avatar
  • 437
0 votes
1 answer
25 views

Mandatory fields based on other fields in the Zod

I have yup object schema validation like this (simplified): So, let say I want make barcode_old mandatory if is_change_part value is 'Yes', and by default its opsional. In yup, I can do it like this: ...
muhfaridzia's user avatar
-1 votes
0 answers
19 views

Yup when validation options and ways

What is diffrent beetwen obj.when("name", {...}) and obj.when("$name", (item, schemat) => ({...}))? I try it, when obj was in another obj and name was for obj im first level and ...
Mateusz's user avatar
0 votes
0 answers
25 views

Use two yup schemas for the same react form component with typescript

I have a form for creating a product in react using yup and react hook form. That same form could be used for updating the product so I thought that maybe I could reuse that react functional component ...
Juan's user avatar
  • 55
0 votes
0 answers
41 views

TypeScript infers optional fields for Yup schema when using .required()

I am validating my create campaign form by building yup schema. This form has a field called sellers and the field will be array of object with type of {id: number; label: string}. Typescript infers ...
Mehmet Emre Ast's user avatar
0 votes
0 answers
39 views

Validate File input using Yup in NextJs

I have an optional file input in a yup schema and I want to validate its size and file type. The problem is that the HTML input type file is sending an array of Files to the test function, and it's ...
Robin Dalmy's user avatar
0 votes
0 answers
67 views

Trying to build deploy my Vite react app on render and getting this error. I figured it has something to do with the Yup module but it is installed

[vite]: Rollup failed to resolve import "Yup" from "/opt/render/project/src/src/pages/Login.jsx". This is most likely unintended because it can break your application at runtime. ...
user22867449's user avatar
1 vote
2 answers
72 views

how to validate react formik form depending on the input content?

I need to validate the form as follows: all fields in the form are optional, but if at least one field has a value entered, they all become mandatory. I wrote: const getRequiredSchema = () => { ...
alexandr2006's user avatar
0 votes
0 answers
30 views

react-hook-form and Yup array

I'm using React hook form and Yup. How to validate that the first child must have both a name and age (required), while the subsequent children do not need to have them const parentSchema = Yup.object(...
Duy Phong's user avatar
0 votes
0 answers
45 views

yup object is not assignable, but why?

From this code: import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; interface IFormInputs { firstName: string; } const validationSchema = Yup....
meds's user avatar
  • 22k
0 votes
0 answers
31 views

How can I dynamically add or remove required fields in Yup?

I want the field "taxOffice" to be required or not based on the value received in the "membershipType" field. How can I achieve this using Yup? "When I use the when() function,...
mahmutoz's user avatar
  • 271
0 votes
1 answer
22 views

Trying to clean up the field.value of a field in Yup outside the render

I'm trying to clear the field.value of a Controller field from react-hook-forms which is managed by yup through an external clean up function and it doesn't have access to the field that is generated ...
Dark's user avatar
  • 85
0 votes
0 answers
55 views

How to add percentage symbol at end of input value in input field with yup validation

How to add a percentage symbol at the end of the input value in the input filed with yup validation? Here I am using the JavaScript in-built method to covert percentage <FormField control={form....
MOHANRAJ M's user avatar
0 votes
1 answer
47 views

Handle File Validation Using Yup and React Hook Form

So, basically, I have a form where I have <input type="file" /> as one of the fields. I want this field to be required. const { register, handleSubmit } = useForm({ defaultValues, ...
Rasil's user avatar
  • 56
0 votes
1 answer
38 views

Yup' I upgraded my version. How can I use ObjectShape?

I upgraded the yup version in my react project that I wrote with Typescript. "yup": "^0.32.11" -> "yup": "^1.3.2" I am getting an error like in the image. ...
omurozbek's user avatar
0 votes
0 answers
13 views

react-hook-form + yup: show error when dependent inputs cause invalidity

Two date inputs - start must always come before end - and therefore, when one or the other causes it to be erroneous the message can be the same and shown once, i.e. "End cannot come before start....
Neil Gaetano Lindberg's user avatar
0 votes
1 answer
108 views

Yup validation in form with TypeScript

I have a form that can create or edit an object. Each attribute is required so you cannot create/save an object without a valid A and B. I'm using yup and TypeScript latest version. interface Exemple{ ...
Killian Martin's user avatar
0 votes
2 answers
58 views

How to share the value of a field between 2 yup schemas

I'm building a multi-step form where each step is its own form and has its own validation schema. im using react-hook-form for the form (don't think that matters here) and yup for the validation so ...
Quak_2023's user avatar
  • 259
0 votes
1 answer
37 views

Augment Yup locale definitions

I'm trying to augment the Yup DateLocale (source) to add locale support for the custom compareToday function I added. However, while the custom compareToday function does work, unfortunately all ...
Kendall's user avatar
  • 2,012
0 votes
0 answers
29 views

yup validation schema conditional validation on object

import * as Yup from "yup"; import * as consts from "../consts-for-yup"; export const legalNoFurtherActionValidationSchema = Yup.object().shape({ NrwDecision: Yup.object().shape(...
Michal Sakowski's user avatar
0 votes
1 answer
37 views

Keep showing error message in Formik field select and Yup validation

I am trying to use formik and yup valiation first time, I have created a Select Field and have put some options , after selecting the option everytime it keep showing the validation error message , ...
TINTIN's user avatar
  • 113
0 votes
0 answers
12 views

Yup Validation for Formik Form - Issues with Validating Payment Date and Conditional Fields

I'm working on a Formik form with Yup validation, and I'm encountering some issues with validating the pensionPaymentDate field and managing conditional fields based on the pensionAmountField and ...
goatstash's user avatar
  • 162
0 votes
0 answers
35 views

How can I make a field optional in Yup based on a condition?

I am using yup for form validation. I have two fields: 'authorizedService.serviceGround' and 'airService.navFee'/'airService.ofFee.' I want to make them optional. For example, if the user selects '...
Suhas's user avatar
  • 73
0 votes
0 answers
53 views

Incorrect validating Object when using Vee-Vallidate 4.11.7, Yup 4.11.8, Vue 3 and PrimeVue 3.30.2

I am having an issue of getting a simple validation correct using Vee-Validation, Yup, PrimeVue and Vue 3. My goal is to use a object to validate my entire form instead of using multiple useFields for ...
Tumi's user avatar
  • 41
0 votes
1 answer
36 views

Why does react-hook-form consider the select field empty on submission?

Can someone elucidate me as to why upon submission 'category' is considered empty and triggers the invalid call of react form hooks? I simplified the code as much as possible but without stripping ...
Paulo R.'s user avatar
  • 15.4k
0 votes
1 answer
18 views

Rendering const Variable in JSX after Form Submit

To further learn and practice with Next.js, I am attempting to make a website that shortens a long URL like Tinyurl. However, I am having trouble rendering the shortened URL. I am using a form and on ...
user16052347's user avatar
0 votes
1 answer
64 views

yup validation schema for number with two decimal places and 0 input allowed

export const NumberWithTwoDecimalPlaces = Yup.number() .typeError("Must be numeric") .nullable() .transform((value: number, originalValue: string) => // allow empty strings (...
Michal Sakowski's user avatar
0 votes
0 answers
25 views

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/yup.js?v=3827e2ab' does not provide an export named 'default'

error I encountered an issue while working with Formik in a Vite project. Specifically, when I attempted to implement form validation using Yup with Formik, I encountered an error. To address this, I ...
Tushar shelke's user avatar
0 votes
1 answer
120 views

How to use required fields when using react-hook-form with yupResolver and Typescript?

The following type is auto-generated from the OpenAPI specs of the Rest API, therefore I can't simply change it: export type InventoryItemCreate = { name: string; status_id: number; barcode?: ...
Daniel's user avatar
  • 1,448
0 votes
1 answer
23 views

How to allow yup object to take in undefined with MUI?

Although my Form has clearly declared that the key is optional, my input does not seem to accept undefined as a value here, my input keeps returning me the error : bonusPercentage must be a number ...
rt10's user avatar
  • 35
0 votes
0 answers
9 views

Yup start_date strictly before end_date validation

How to validate a start_date that must be before_end, without equality to be true ? I have this schema : start_date: yup .date() .typeError("Wrong type") .required("...
Enzo's user avatar
  • 123
0 votes
0 answers
48 views

Using a callback function in the formik yup.object() validation

I have a dynamic form, I will not exactly be able to predict the fields and field type so I have been trying this and nothing seems to be working <Formik initialValues={{ /...
Olatunji Sharon's user avatar
0 votes
2 answers
46 views

Add two errors to number validation

I'm using input type=numberand validation to it. What I am trying to do: if value is not number - show error only numbers allowed if input is empty - show error value is required yup.object()....
uhidga's user avatar
  • 11
0 votes
0 answers
36 views

yup validation error message keeps rendering when I add an onChange prop in my fields in formik

I keep getiing is a required field even though I filled the field when I add these two propsonChange={formik.handleChange} value={formik.values.firstname}. The problem goes away when I remove them ...
Dagim Debebe's user avatar
0 votes
0 answers
18 views

Yup validation in React always prompts "Please select an option" even when an option is selected

I am using a custom form library in a React project along with yup for field validation. In my PensionAmountField component, I have a radio group where users can select a pension amount option. Even ...
goatstash's user avatar
  • 162
0 votes
4 answers
70 views

How can I strip invalid data with Yup?

Is it possible with Yup to validate an object and keep all valid data and ignore invalid data and strip them? In the following example I would like to keep jimmy and name because it is valid and strip ...
A.A's user avatar
  • 3,260
0 votes
0 answers
23 views

Yup: Array error message sometimes has a string, sometimes a numeric index

Trying to validate an array of strings with these rules. The array has numeric indexes, yet the first rule returns a string index, making it difficult to map to error messages. What am I doing wrong? ...
Arthur's user avatar
  • 1,488

1
2 3 4 5
32