Questions tagged [yup]
Yup is a JavaScript object schema validator and object parser based on Joi
1,594
questions
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 ...
-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 ...
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(...
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,
...
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 ....
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 ...
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>...
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>
<...
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(...
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: '',
...
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 ...
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: ...
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:
...
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(...
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:
...
-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 ...
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 ...
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 ...
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 ...
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.
...
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 = () => {
...
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(...
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....
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,...
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 ...
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....
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,
...
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.
...
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....
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{
...
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 ...
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 ...
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(...
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 ,
...
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 ...
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 '...
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 ...
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 ...
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 ...
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 (...
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 ...
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?: ...
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 ...
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("...
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={{
/...
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()....
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 ...
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 ...
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 ...
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?
...