Check the vuelidate required function in Vye.js for ensuring that all necessary fields

I am currently utilizing the vuelidate plugin for form validation.

import { required, maxLength } from 'vuelidate/lib/validators';

In my Vue component, I have a method called isFinishedFill():

methods: {
  isFinishedFill() {
    return !!this.disabledFinishedAt || !!this.finishedAtYear;
  }
}

Now, I want to apply the required rule from vuelidate to my function, but it's giving me an error:

validations: {
  finishedAtYear: {
    required: this.isFinishedFill,
  },
}

Can someone please guide me on how to successfully apply the required function in this context?

javascriptvue.jsvuejs2vue-componentvuelidate

Answer №1

To implement a custom validation function, you can follow this approach:

import { required, maxLength } from 'vuelidate/lib/validators';
// Custom validation function
const isValidData = (value, vm) => !!vm.dataValue || !!vm.customValue;
// vm refers to the Vue instance

export default {
    ...
    validations: {
        customValue: {
            required,
            isValidData // <---- Implement your custom validator here
        }
    }

Answer №2

After reviewing the example from the documentation, make an attempt to refactor your code in a similar manner.

validations: {
    finishedAtYear: {
        isFinishedFill: this.isFinishedFill,
    },
}

Alternatively, you can opt for using a pure function:

validations: {
    finishedAtYear: {
        isFinishedFill: (value) => { /* perform necessary checks here */ },
    },
}

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

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this: const products = [ { product: 'prod_aaa', name: 'Starter' }, { product: 'prod_bbb&apos ...

javascripttypescript

Oops! The Route.post() function is looking for a callback function, but instead, it received an [object Object

Looking to integrate a password reset feature in my web app, but encountering the error mentioned in the title. Here's a snippet of my code: main.js: const router = express.Router(); const AsyncNewPassword = require('./controller/asyncnewpasswor ...

javascriptnode.jsexpressmongooseexpress-router

Receiving an empty string from Chrome FileReader when dealing with large files (300MB or more)

Objective: The task is to read a file from the user's file system as a base64 string in the browser The size of these files can be up to 1.5GB Challenge: A script that works flawlessly on Firefox, regardless of the file size On Chrome, the script p ...

javascriptgoogle-chromefilereader

I am unable to find the URL /receipt on this server, however it is functioning properly on localhost

Everything is functioning perfectly on my localhost, but once I publish the website and try to access it, I encounter an error that says "Failed to load resource: the server responded with a status of 404 (Not Found)". Let's take a look at the code s ...

vue.js

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

javascriptjqueryhtmlcss

An error has occurred due to a connection timeout with the net.Socket

I have been attempting to send text to my network printer using a tcp connection. function print(buf2){ var printer = new net.Socket(); printer.connect(printer_port, printer_name, function() { console.log('Connected'); printe ...

javascriptsocketstcpnpmelectron

Identifying HTTP Live Streaming on mobile devices

I am seeking a reliable method to determine if a mobile device can play HTTP Live Streaming (m3u8). Currently, I am using the following script for testing purposes: function isHLSEnabled() { var videoElement = document.createElement('video' ...

javascriptandroidmobilehttp-live-streaming

Removing an element from the parent/master array after splicing the copied array

My array setup includes a master array called the parent array. When the page loads, a PHP array encoded in JSON with information about every user on the site is assigned to a JavaScript variable - var all_users = <?php echo $users;?>;. Upon logging ...

javascriptjqueryarrays

Should you avoid using <script setup> in Vue3 for any particular reason?

https://vuejs.org/guide/extras/composition-api-faq.html I'm currently delving into the contrasts between the composition API and legacy options API within vue 3. I find myself perplexed on when it is appropriate to utilize the setup function and props ...

vue.jsvuejs3vue-composition-api

Combining Vueify with Elixir and Hotloading led to an unexpected error: Uncaught TypeError - property 'indexOf' is undefined

I have successfully configured Elixir to utilize Vueify with a hot reload plugin. The compilation process runs smoothly, but I encounter a console error in my compiled file and the Vue component does not seem to transform into HTML; it still displays the & ...

javascriptbrowserifyvue.jslaravel-elixir

What causes a CSS class to not be applied when using JavaScript onload?

I've been attempting to add a class to an element after the page has loaded in order to change its height and opacity through a transition effect, but so far, I've been unsuccessful. This is how my HTML file looks: <head> <script> ...

javascriptjqueryclassonloadtransition

The responsiveness of Slick Slider's breakpoints is malfunctioning

After implementing a slider using slick slider, I encountered an issue with the width when testing it online and in a normal HTML file. If anyone could assist me in resolving this issue, I would greatly appreciate it. Please inspect the code for both scen ...

javascriptjqueryhtmlcssslick.js

Reactjs is failing to display the page

I am facing an issue where the components are not rendering in the browser even though there is no error being displayed. This makes it difficult to troubleshoot and resolve the problem. Can someone help me identify the root cause? import React, { Com ...

javascriptreactjsnpmreact-routerreact-router-dom

Is there a way to eliminate the __ob__: Observer from my list of arrays?

Here's my array: data = [38589, 3, __ob__: Observer]; I'm trying to send a put request API with this array in the body, but I keep getting a 400 error. Could it be that the __ob__: Observer part is causing issues? If so, how can I remove it fro ...

vue.jsvuejs2

Utilizing Async.each fails to trigger the ultimate callback function

Here's the scenario: I expect the function finalCallBack to be triggered after we finish looping through all elements. var rows = [ { name: 'first'}, { name: 'second'} ]; var execForEachRow = function(row, callback){ var ...

javascriptnode.jsexpress

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...

htmlcssvue.jsvuejs2

Tips for minimizing unnecessary rerenders in child components that rely on cached information from the parent component

check out the sandbox here Application maintains state to compute a memoized value, which is then passed as props to the Options. When a change occurs in the state triggered by a callback function in Option, it causes a rerender of the main Application, r ...

javascriptreactjsreact-hooksreact-lifecycle

Steps for generating a hierarchical menu utilizing data from a CSV file

I am looking to use a CSV file to structure the menu on my webpage. Could someone assist me in creating a nested menu using JavaScript with the provided CSV data? The columns consist of: Level, Menu name, URL 0;"Service"; 1;"Service 1";"http://some-url- ...

javascriptjqueryreactjs

Anticipated spatial glitch problem involving the gadicc/meteor-reactive-window package for Meteor

Utilizing the gadicc/meteor-reactive-window Meteor Package to switch templates based on screen size. This file is named pictureDisplatSection.html <template name="pictureDisplaySection"> <div class="display"> ...

javascriptjqueryhtmlmeteormeteor-packages

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...

javascriptjqueryhtmlcss