Yup will throw an error if both a minimum value is set and the field is also marked

Question

Yup will throw an error if both a minimum value is set and the field is also marked

I am attempting to validate my schema using yup:

import * as yup from "yup";

let schema = yup.object().shape({
  name: yup.string().min(5)
});

const x = { name: "" };

// Check validity
schema
  .validate(x, { abortEarly: false })
  .then((result) => {
    console.log({ result });
  })
  .catch((err) => {
    console.log({ err });
  });

Example on codesandbox.io

The field name is empty in the object x, yet yup throws an error for min. Why is this happening? Is there a specific rule I can use to address this issue?

I want to apply the min validation only if there are any characters present in the x object. How can I achieve this using yup functions?

typescript yup

Answer 1

Answer №1

Indeed, it throws an Error as an exception. You cannot view it through a simple console.log. If you wish to see the error message on the console, in your scenario where you only want to check if there is some value for the name. Otherwise, skip running the validator. For this purpose, you can utilize yup.lazy and include a condition within it:

const mySchema = yup.lazy((value) =>
  yup.object().shape({
    name: value.name.length > 0 && yup.string().min(5) // add condition here
  })
);

Below is the code snippet:

import * as yup from "yup";

const mySchema = yup.lazy((value) =>
  yup.object().shape({
    name: value.name.length > 0 && yup.string().min(5)
  })
);

const x = { name: "" };

// validate
mySchema
  .validate(x, { abortEarly: false })
  .then((result) => {
    console.log({ result });
  })
  .catch((err) => {
    console.error(err);
    console.log("Error message", err.message);
  });

You can access the demo by visiting: https://codesandbox.io/s/yup-render-only-input-tyjyu

Answer 2

Indeed, it throws an Error as an exception. You cannot view it through a simple console.log. If you wish to see the error message on the console, in your scenario where you only want to check if there is some value for the name. Otherwise, skip running the validator. For this purpose, you can utilize yup.lazy and include a condition within it:

const mySchema = yup.lazy((value) =>
  yup.object().shape({
    name: value.name.length > 0 && yup.string().min(5) // add condition here
  })
);

Below is the code snippet:

import * as yup from "yup";

const mySchema = yup.lazy((value) =>
  yup.object().shape({
    name: value.name.length > 0 && yup.string().min(5)
  })
);

const x = { name: "" };

// validate
mySchema
  .validate(x, { abortEarly: false })
  .then((result) => {
    console.log({ result });
  })
  .catch((err) => {
    console.error(err);
    console.log("Error message", err.message);
  });

You can access the demo by visiting: https://codesandbox.io/s/yup-render-only-input-tyjyu

Answer 3

Answer №2

I reached out to the developers of yup for assistance on a particular issue and they have provided me with a ticket to address it. While waiting for their response, I found a temporary solution using regular expressions in combination with the match function.

let schema = yup.object().shape({
  name: yup.string().matches(/^(|.{5,})$/, "X must be at least 5 characters")
});

You can test this workaround in the sandbox here: https://codesandbox.io/s/hopeful-lewin-z77pc

Answer 4

I reached out to the developers of yup for assistance on a particular issue and they have provided me with a ticket to address it. While waiting for their response, I found a temporary solution using regular expressions in combination with the match function.

let schema = yup.object().shape({
  name: yup.string().matches(/^(|.{5,})$/, "X must be at least 5 characters")
});

You can test this workaround in the sandbox here: https://codesandbox.io/s/hopeful-lewin-z77pc

Yup will throw an error if both a minimum value is set and the field is also marked

Answer №1

Answer №2

Similar questions

Error in VueJS/Typescript: Module 'my-module' or its type declarations are not found

Reactive form allows you to easily format dates

Displaying a React component within a StencilJS component and connecting the slot to props.children

Creating a versatile function in TypeScript for performing the OR operation: A step-by-step guide

Is it possible to enhance an interface by integrating the characteristics of a constant?

What is the reason that Ionic Lifecycle hooks (such as ionViewWillEnter and ionViewWillLeave) do not trigger when utilized as an HTML Selector?

Exploring the MVVM architecture in React and the common warning about a missing dependency in the useEffect hook

What is the proper technique for utilizing private fields in TypeScript?

What is the best way to retrieve a specific field from the observable data stream?

Troubleshooting an Integration Problem Between Express and socket.io

Access SCSS variable values in Angular HTML or TypeScript files

Differentiate the array type within an object in TypeScript

The `findOne` operation in Mongoose fails to complete within the 10000ms time limit

ERROR: The variable countryCallingCode has not been defined

Utilizing TypeScript interfaces with additional parameter object members does not result in the anticipated compilation error

Building Components on the Fly with Angular 5

Tips for simulating a Ref

Swagger Issue Resolved: Restriction on Number of Params Set

Passing layout to a Vue component using the setup script

Tips for testing FormGroupDirective within a component