Discovering the correct way of utilizing Vuelidate's minValue and maxValue functionality

Question

Discovering the correct way of utilizing Vuelidate's minValue and maxValue functionality

I am having trouble figuring out how to validate for values greater than 0. When using minValue(0), it also accepts the value 0. On the other hand, if I use minValue(1), it does not accept any decimal between 0 and 1.

Furthermore, I am facing an issue with using variables from data/computed for the maxValue validation. It works when I use maxValue(200), but I require it to be dynamic.


validations: {
    form: {
        amount: {
            maxValue: maxValue(this.maxAmount), // Uncaught TypeError: Cannot read property 'maxAmount' of undefined
        },
    },
}, 
validations: {
    form: {
        amount: {
            maxValue: maxValue(maxAmount), // Uncaught ReferenceError: maxAmount is not defined
        },
    },
},

javascript vue.js vuelidate

Answer 1

Answer №1

In my opinion, the validations should be structured as a function rather than an object in this scenario.

validations() {
  return {
    form: {
      amount: { maxValue: maxValue(this.maxValue) }
    }
  }
}

For reference, you can check out a similar example here:

--UPDATE--

Regarding the requirement for a value greater than 0, as mentioned in my previous comment:

It appears that there might not be a predefined validator for this specific case. One option is to create a custom validator like this:

const greaterThanZero = (value) => value > 0

validations() {
  form: {
    amount: {
      maxValue: greaterThanZero
    }
  } 
}

Alternatively, you can use minValue(0.00000001) as a workaround. Custom validators can also accept parameters, allowing you to create a dynamic validator. More information on this can be found in the documentation:

Answer 2

In my opinion, the validations should be structured as a function rather than an object in this scenario.

validations() {
  return {
    form: {
      amount: { maxValue: maxValue(this.maxValue) }
    }
  }
}

For reference, you can check out a similar example here:

--UPDATE--

Regarding the requirement for a value greater than 0, as mentioned in my previous comment:

It appears that there might not be a predefined validator for this specific case. One option is to create a custom validator like this:

const greaterThanZero = (value) => value > 0

validations() {
  form: {
    amount: {
      maxValue: greaterThanZero
    }
  } 
}

Alternatively, you can use minValue(0.00000001) as a workaround. Custom validators can also accept parameters, allowing you to create a dynamic validator. More information on this can be found in the documentation:

Discovering the correct way of utilizing Vuelidate's minValue and maxValue functionality

Answer №1

Similar questions

Creating a tab component using vanilla javascript

When there is no data in the request body, ExpressJS will display it as empty

Inquiry regarding the ng-disabled directive in AngularJS

How can state be shared between sibling components in React?

The resolution of deferred actions is not as successful as foreseen

Troubles encountered in retrieving values from various <select>/<option> elements

What is the best way to halt all active Ajax requests initiated by a DataTables instance?

Can we include an option to display all pages in one row on a single page?

Ajax versus embedding data directly into the HTML code

Convert coordinates from X and Y within a rotated ImageOverlay to latitude and longitude

Tips for utilizing a variable from a function in one file within a function in another file

Toggle on and off using a checkbox feature in conjunction with the straightforward form gem

JSON.Parse allows for graceful degradation of data when handling JSON objects in JavaScript

A guide on how to access a Vue data property within another data property

After modifying environment variables in Vue.js, the application still refers to the previous values

Is there a way to customize the color of an element within CardHeader in MUI?

Ways to emphasize the index navigation link when on the main page

Using Vue to dynamically wrap a component with a tag

Step by step guide to verifying email addresses with Selenium WebDriver

JavaScript popup is no more visible on the webpage