How can we utilize an index within the name attribute and incorporate a personalized error message leveraging vee validate?

I am faced with a challenge on a page where I have a collection of user cards. Each card has specific field names that need to be differentiated using an index, such as userDob${i}.

In addition, I need to generate custom messages for these user inputs. Normally, I can define custom messages like this:

custom: {
  userDob: {
    required: 'User dob is required',
    date_format: 'Please enter a dob in the correct format (yyyy-mm-dd)'
  },
}

However, in this scenario, I require a more dynamic approach. I need to find a way to disregard the index or assign an alias to use in my custom messaging instead of relying solely on the name attribute as the property name.

I thought Vee Validate had an option to use an alias, but I have been unable to locate it so far.

Answer №1

Vee Validate offers the option to specify an alternative name value using "data-vv-name" and "data-vv-as" for presenting a message to the user.

While I don't have access to your input field code, you can consider adding something similar to this:

:data-vv-name="`${value.field_name}`"  // For example, user_name
:data-vv-as="key"   // Name

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

Utilize a single array to point to multiple elements

I am curious about the potential to create a unique scenario using JavaScript. Imagine having two arrays: a = [1, 2, 3] b = [4, 5, 6] What if we could combine these arrays into a new array, c, that encapsulates both: c = [1, 2, 3, 4, 5, 6] The intrigui ...

Displaying separate items onto a webpage based on their unique identifiers

Currently, I am in the process of developing a JavaScript web application that retrieves input from a user (specifically the name of a music artist) and then produces a list of related artists along with their most popular songs, all thanks to information ...

Show targeted information from the array using the respective identifier

Is it feasible to exhibit data from a Vuex store array in a unique manner, comparable to the illustration provided below: <template> <div> <h1>{{this.$store.state.data.title}}</h1> <p>{{this.$store.state.da ...

React / Next.js Rendering Problem, Data Discrepancy Between Client and Server

A new feature has been added to a webpage where an image background and a city name are displayed on top of it. The data file that generates these image backgrounds and city data consists of a standard array of objects. The challenge lies in dynamically l ...

add a JavaScript variable to a JSON data structure

My JSON object is valid and it's called list_to_book_for: {"fold1-key1":{"name":"Van Antwerpen"},"fold2-key2":{"name":"Delporte"},"fold3-key3":{"name":"Lallemand"}} In order to add the content of a variable into this object, I have the following str ...

What is the best way to compare a JSON object and a string in JavaScript?

Currently, I am working on developing the website layout for . Most of the data retrieval and display have been successful so far. However, when attempting to filter my search results to show only stop names associated with Subways, I encountered some err ...

An incorrect object was removed from the array

Having an issue where the wrong item is getting deleted from an array in my component's state. Here is a simplified version of my parent Component: export default class BankList extends Component { state = { banks: [new Bank("Name1"), new ...

Discover how to utilize images encoded in base64 format within webhook embeds on Discord

Can someone help me with inserting an image into a Discord embed using a webhook? I have the image saved as a base64 string obtained from a database. However, my attempts so far have only resulted in an empty embed. https://i.sstatic.net/CVs4j.png const d ...

Using Javascript/JQuery to extract numbers from a URL with regex or alternative methods

I need help extracting a specific group of consecutive numbers from the following URLs: www.letters.com/letters/numbers/letters" and www.letters.com/letters/letters/numbers/symbols Is there a way to isolate only the continuous sequence of numbers in th ...

Is it necessary to transfer the data from the method to the model in vuejs?

I'm new to Vue.js and I'm working on querying data from a REST API within the methods section. I'm unsure if I should push the data from the Ajax method to the data model in order to perform conditional rendering in the markup. If that' ...

It appears that Next.js's useDebouncedCallback function is not effectively delaying the request

I am currently learning Next.js and trying to work through the tutorial. I have hit a roadblock on this particular page: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination Despite conducting an extensive web search, I couldn't find a ...

Utilize Express.js routes to deliver static files in your web application

I am looking to serve a collection of HTML files as static files, but I want the routes to exclude the .html extension. For example, when someone visits example.com/about, I'd like it to display the contents of about.html In my research on serving ...

search for a specific value within a nested subfield of an asterisk star field in Firestore

Here is the data I have: { root: { _rEG: { fen: 'value' }, _AS: { fen: 'value' }, _BSSA: { fen: 'value' } } } I would like to query using where('root.*.fen', '==', 'value'). ...

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

How do I declare the links in my navigation drawer?

I have successfully implemented a navigation drawer with dropdown menus. However, I'm struggling to figure out how to declare the routes so that clicking on the navigation names redirects me to the desired route. Can you guide me on how to properly de ...

Modifying deeply nested properties in Vue.js

Within my Vue.js application, I've created a method to update the src attribute of images whenever a file is chosen from a file input field. This method is triggered like so: <input type="file" accept=".jpg,.png" @change="updateSrc($event, 'p ...

Are you looking for a way to prevent the default behavior of an event in angular-ui-router 1.0.x? Check out

Recently, I made a change in my code where I replaced $stateChangeStart with $transitions.onStart $rootScope.$on('$stateChangeStart', function(e, ...){ e.preventDefault(); // other code goes here... }); Now, the updated code looks lik ...

Screen readers do not recognize the disabled attribute

I am currently using a stepper with a Material UI number field that is disabled. Despite the disablement, the screen reader is still able to adjust the number by incrementing and decrementing it. The corresponding HTML code is shown below: <input ari ...

Retrieve all direct message channels in Discord using DiscordJS

I need to retrieve all communication channels and messages sent by a bot. The goal is to access all available channels, including direct message (DM) channels. However, the current method seems to only fetch guild channels. client.channels.cache.entries() ...

Exploring Nested Data in MongoDB Aggregation using $match and $project

Struggling with crafting a Mongoose Aggregate Query to extract the permissions object of a specific member within a deeply nested structure of business data. MongoDB's documentation on this topic is lacking, making it hard for me to progress. Sample ...