Is it possible for a single field to validate and accept multiple types of data?

As a newcomer to Yup, I am attempting to validate a field that can be either a string following a specific regular expression or an array of such strings.

Below is a functional example of validating a string that matches the regex:

{ field: yup.string().matches(regex) }

Now, I need the field to be considered valid if it contains an array of such strings:

{field: yup.array().of(yup.string().matches(regex))}

However, I am facing a challenge in combining the two validations. I have attempted the following:

{
  field: yup.mixed().when('field', {
    is: Array.isArray,
    then: yup.array().of(yup.string().matches(regex)),
    otherwise: yup.string().matches(regex)
  })
}

Unfortunately, this approach results in a cyclic dependency error because the field is dependent on itself. What is the correct syntax I should use to achieve the desired validation?

Answer №1

Validate input with a custom regex pattern in a mixed type validation function named 'test-name' provided with an error message. The function checks if the input value matches the specified regex pattern 'your-regx'. If the input is an array, it iterates through each element to perform the regex test. 

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

Error encountered: React Typescript does not support the "any" type in a template literal expression

I have been encountering an issue with my slider component in React Typescript. The error message I keep getting is related to the "Invalid type 'any' of template literal expression" specifically at the const fillWidth variable. I am struggling t ...

Testing if the App properly renders results in an error message: "No element found with the text: Profil"

I am struggling with testing Jest as I lack experience in this area. Specifically, I need to determine whether the App component is being rendered successfully. However, my test cases are failing. Upon checking the console log, I encountered the following ...

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...

Navigate to the following div, navigate back to the previous div

I am attempting to implement a div navigation system with next/previous buttons. Despite searching extensively on Google, I have not found the exact solution I am looking for. First and foremost, I want to maintain the integrity of my html structure. < ...

An unexpected error occurred with React JS stating: "Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row}"

I need help in showing data from a database in a React JS application. Encountered error in React JS: Error: Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row} This is my code: Index.p ...

Where is the source of this ever-changing image?

Recently, I decided to dive into the world of jQuery and experiment with a plugin carousel. However, I must admit it is all a bit overwhelming for me at the moment. Currently, I have the plugin installed and I am struggling to get rid of the bottom scroll ...

What could be causing my function to fail <object>?

Within index.php, I am calling the function twice, which includes chart.html. index.php chart_line($valuesNight); //first call chart_line($valuesEvening); //second call ?> <?php function chart_line($jsonDataSource){ ?> < ...

How is it possible to retrieve the flex-direction property value of a div using JavaScript?

While attempting to troubleshoot this issue using Windows Chrome 59, I utilized devtools to examine the properties. let element = document.getElementById("divId"); Upon checking the value of the element, I noticed that the object structure displayed: &g ...

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

Challenges with receiving form submissions

I'm new to asking questions here, but I've been reading articles and questions for a while now. My question is about a specific part of a code that has been causing me trouble. In my project, I have a registration form with both JS validation an ...

The data received from the frontend is being replicated in the backend, causing duplication issues in a React

Whenever I click the button labeled onClick, it triggers the transmission of data (both time and ID) to the backend. The issue at hand is that the backend seems to be receiving the data twice instead of just once. On inspecting req.body, it becomes eviden ...

Ways to define an interface that can accommodate various interfaces with a specific structure

I am in need of a function that can accept a parameter with interfaces having a specific structure. The parameter should be either a string hash or a string hash along with an attribute string hash, as shown below: { anotherHash: { a: 'a', ...

Data has not been loaded into the Angular NGX Datatable

As a beginner in Angular, I am struggling to set data from the module. ngOnInit() { this.populate(); } public populate() { this.productService.getAllProduct('6f453f89-274d-4462-9e4b-c42ae60344e4').subscribe(prod => { this. ...

Is there a way to delete a field from a JSON object using JavaScript?

Searching for a way in Node.js to eliminate the date and operation fields from the database. Any suggestions on how to do this? Currently, all fields are being transferred to the FE. The collection pertains to MongoDB. collection.find({'recordType&ap ...

What is the method to define a function that strictly accepts a value of type T only if IsSomething<T> evaluates to true?

In my system, there is a complex generic type called IsUnique<T> that evaluates to either true or false based on the input type T: type IsUnique<T> = (/* ... */) ? true : false; Now I am looking to develop a function that takes an unique value ...

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...

When extracting the host URL and destination URL

When making an Ajax POST call to retrieve data from a file on a different server, I am encountering an issue where my host URL is being added to the destination URL for my AJAX request. Host URL: 192.168.1.2 Destination URL: 192.168.1.7/var/www/html/pfe/ ...

Mandatory tick box needed for submitting PHP form

Although the topic of PHP form validation is frequently discussed, I am a complete beginner in PHP and I am currently experimenting with a PHP form script that I discovered here. As a result, I am unsure about how to proceed with incorporating two specific ...

Issue with Vue and Firebase: New users are being created successfully, but are being logged into existing user accounts

I've encountered a strange issue in Firebase. When I create a new user with the same password as an existing user, the new user is logged in under the previous user's account and displays all their information. However, upon logging out and signi ...

Issue: Failed to Render: Error encountered during parsing of template: Element 'mat-checkbox' is not recognized as a valid element

For the purpose of testing my component, I wrote the following code snippet: describe('Component: TestComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEac ...