Questions tagged [yup]

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

Yup is a JavaScript object schema validator and object parser. The API and style is inspired by Joi.

Yup is leaner than Joi: in the same spirit, without some of the fancy features. You can use it on the server as well, but in that case you might as well just use Joi.

Yup is also a good bit less opinionated than joi, allowing for custom transformations and async validation. It also allows "stacking" conditions via when for properties that depend on more than one other sibling or child property. Yup separates the parsing and validating functions into separate steps so it can be used to parse json separate from validating it, via the cast method.

Documentation and source can be found on the yup github page

1580 questions
36
votes
2 answers

How to validate enums in yup

I'm using yup to create validations for my data , how can i handle enums? this is a sample of my validations - I'm using object.shape method of the yup: export const deleteCityValidation = yup.object().shape({ id: yup.string() }); looking for a…
PayamB.
  • 706
  • 1
  • 9
  • 28
36
votes
13 answers

Formik, Yup Password Strength Validation with React

I am fairly new to React, and i have a sign up page where i have a password field to be validated with a Regex. I am using Formik and Yup for validations, but i have encountered an error where it says the property where the length function is being…
Shashaank V V
  • 720
  • 1
  • 7
  • 19
34
votes
7 answers

Yup validation with two fields related

I'm using formik for form management in reactjs, i have a question on validation with yup. I have two fields, ones is a select control to select the country, and the other one is a zipcode. In the country array we have the regex to validate the…
Hans Poo
  • 804
  • 1
  • 8
  • 17
33
votes
3 answers

Yup vs Joi for frontend validation

I want to implement frontend validation with either Yup or Joi. From all the docs and articles that I've found, I've got to a couple of conclusions: Joi has better performance Joi is more popular for backend validation, while Yup is more popular…
Nikola
  • 332
  • 1
  • 3
  • 6
33
votes
6 answers

How do I validate if a start date is after an end date with Yup?

I have a form that creates an event using Formik library. I need to check to see if the start date overlaps the end date and vice-versa. I have two date pickers that choose the date and time. How can I use Yup to validate this and show an error…
QThompson
  • 1,599
  • 3
  • 16
  • 40
30
votes
5 answers

Conditional validation with Yup and Formik

Here is my validation schema: const validationSchema = Yup.object().shape({ person: Yup.object().shape({ name: Yup.string().required('Field is required'), surname: Yup.string().required('Field is required'), middleName:…
Sgt Maddonut
  • 759
  • 2
  • 8
  • 20
28
votes
2 answers

How to use yup's object.shape with typescript?

I'm currently converting a piece of code to TypeScript and running into a few type issues with yup types. I've tried multiple ways and referenced yup's documentation on TypeScript support to tackle this issue to no…
strange_developer
  • 1,327
  • 2
  • 12
  • 17
28
votes
4 answers

Get the value of another field for validation in Yup Schema

I am using Formik with Yup for validation and TypeScript I have a field that needs to validate based on the value of another field. The first field is called price and the second field is called tips. The max tip value is 10% of the what ever the…
Michael Edwards
  • 6,308
  • 6
  • 44
  • 75
28
votes
5 answers

How to Change Default Error Text in Yup/Formik?

If I click on the email input field, the field says "Enter Your Email". This was set by me. However, during I'm typing,when the validation check isn't fulfilled, it says 'enter a valid email' something, which is a default, not written by me. In case…
x89
  • 2,798
  • 5
  • 46
  • 110
28
votes
4 answers

Yup validate is either String or Array of strings

I would like to validate that a field is either a string or an array of strings Here is a minimal failing example which happens to use formik but actually I am doing server side validation using yup. { email: yup .mixed() …
david_adler
  • 9,690
  • 6
  • 57
  • 97
26
votes
2 answers

react-hook-form: Validation not working when using onBlur mode

I am trying to display an error with yup and react-hook-form when the user selects more than 5 checkboxes without success. Instead, the error is shown when the seventh checkbox is selected. Here is the simplified code: imports... const schema =…
aadlc
  • 735
  • 1
  • 12
  • 26
25
votes
9 answers

Yup validation of website using url() very strict

I am trying to validate an input field as a website using yup.string().url() But it seems if the protocol is not sent it gives an error, when the website should be flexible to even accept for example stackoverflow.com
SImon Haddad
  • 742
  • 1
  • 10
  • 24
22
votes
8 answers

Yup validation check if not empty

const validationSchema = Yup.object().shape({ newPassword: Yup.string().min(8, 'Password must be at least 8 characters'); }); I want to validation check only if newPassword field is not empty. How could I do?
장수환
  • 347
  • 1
  • 2
  • 8
22
votes
5 answers

Automatically trim white spaces with Yup and Formik

I am using a Formik React Form and Yup validation defined on a schema: export const Contact = yup.object().shape({ contactName: yup .string() .trim('The contact name cannot include leading and trailing spaces') .strict(true) …
TResponse
  • 3,940
  • 7
  • 43
  • 63
21
votes
4 answers

Yup validate either one of two fields is required (one of them is an array of numbers)

I'm using Formik with Yup and Typescript, and I have this as an initial value of the form ... const initialValues = { title: "", overview: "", related_items_id: [], short_desc: "" }; And here's my schema ... const formSchema =…
Ruby
  • 2,207
  • 12
  • 42
  • 71