Vee-validate: 📢 Please Read VeeValidate 3.0 docs before creating new issues

[logaretm]

The new documentation has replaced the old one, These are some links that will help you understand the changes:

• docs: https://logaretm.github.io/vee-validate/
• discussion issue: #2191

The new release introduced breaking changes, I hope everyone has the patience to go through the documentation carefully.

[Myenny]

This is in my main.js. Does this no longer work with v3?

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

[logaretm]

Sorry Michael, you would need to read the release post and the release notes to determine that. It's not just about your main.js file.

If you are using the v-validate directive then likely you won't be able to upgrade.

[louisameline]

Awesome, I like the new API much more, working great so far, thank you very much!

[webcoderkz]

Where's typescript examples? I didn't found info about inject: false, it doesn't exist? Also what about this.$validator instance?

[logaretm]

@webcoderkz The inject option is no longer available in v3 this was a v2 thing.

I will set up a quick sample for your issue

[marinko-peso]

For those wondering into this GitHub issue, more info on changes that took place can be found:
https://github.com/baianat/vee-validate/issues/2191
https://www.baianat.com/labs/code/veevalidate-3-0

[wishinghand]

I read the announcement, tried to comment. Either the system is broken or you forgot to hide the form.

[logaretm]

@wishinghand I got your comment to show Jason, rules like credit_card were in a tricky spot. For example, most payment forms are done via 3rd party like Stripe which comes with their own validation which is always more accurate than a regex and its kept updated as well.

Even though, it is trivial to add it back.

import { isCreditCard } from 'validator';
import { extend } from 'vee-validate';

extend('credit_card', {
  validate: (val) => isCreditCard(val),
  message: 'Please enter a valid credit card'
});

I understand your point but I hope you also understand the decision. Thank you for your feedback.

[louisameline]

Man it's been 3 days since v3 is out and I'm still hyped. I had been waiting for 15 years for a validation plugin as good as this.
No longer will I tell myself "Damn I hate forms" :smile:
So much love for Vue and now Vee-validate too! You made my week haha :heart:

[Kabe0]

Sigh, the changes means I can't use the VeeValidate plugin anymore as it's trying to be too greedy and try's to access Vue which is not available so when ti calls Vue.extend it gets upset.

The nice thing with Vue.use was it gave access to Vue in a way in which we as a developer had control over when and where the Vue object exists.

[logaretm]

@Kabe0 Why would you need to control when Vue would exist? It should work as you probably have Vue in the global object or available as an npm dependency. Can you explain your use-case as we could find a workaround for it.

[Kabe0]

We are loading using esm in the browser. We load over http2 I cannot get into the specifics, but the basics are that ESM in the browser is being used.

Of course some problems exists right now which one of those is when loading a third party ESM module it's basically impossible without some kind of compiler. When using modules Vue is not in the global space so the easy solution was to just initiate vee-validate in the module using Vue and then assinging vee-validate with the Vue.use function.

Anyways, I get why it was made to load Vue itself, it does make things less flexible though.

[logaretm]

@Kabe0 I see, could you set up a minimal example on codesandbox or glitch? maybe a repo that I can clone. I could try to offer a workaround.

[Kabe0]

https://codesandbox.io/embed/static-mkp7u
Here is a code example of what was working in version 2 of VeeValidate.

~Cheers

[paulm17]

Gonna say, I really like the new version. I think it's a vast improvement from V2.

The last version was a bit difficult to follow, but the newer one it's just so much easier to get going. Just took me a few seconds to notice the change and a few more to upgrade. The transition has been painless thus far.

Can't wait to see how Vue 3 changes things and how that affects this plugin. As @louisameline says I ❤️ Vee Validate too!

[logaretm]

@paulm17 Thanks for your kind words, if you are looking for a sneak peek on what could be with Vue 3.0.

You should check this one out which works for the current @vue/composition-api. Still WIP though.

[renestalder]

Can somebody tell me where that migration guide is located? Searched issues, searched readme, searched in the documentation, searched in the release page of GitHub. The only thing I found is kind of an empty pull request.

[fessacchiotto]

@logaretm this looks great! https://github.com/logaretm/vue-use-form
When released for production, should it be sufficient for all form validation needs?
Could I use it right away with some confidence?
I've a largish app with several forms, dynamic and nested too. Validation is an essential part of it, but i've used vee-validate 2.x heavily so far and migrating all code (especially the API related one) is not easy... I'm thinking I could jump right away on vue-use-form as I'm already converting my code to v3 via the composition-api plugin.
Thanks!

[sustained]

The docs are currently 404-ing?

[logaretm]

@sustained The repo was moved recently, I've updated the link

https://logaretm.github.io/vee-validate/

[sustained]

Excellent, was just making sure you were aware.

[Hawxy]

FYI the "Many validation rules are provided out of the box" and "Custom Rules" links on the introduction page currently 404.

As a side note, I'm unable to use the alpha rule with extend in TS as the signature doesn't match, am I missing something?

[marufmax]

"export 'default' (imported as 'VeeValidate') was not found in 'vee-validate'

if I use Vue.use(VeeValidate)

i am not extending any rules. How can I upgrade to 3.0 ?

[gkatsanos]

Is there a migration guide for 2.x users?

[logaretm]

@Hawxy I fixed those links, thanks for reporting them. Some rules seem to be off with their typings, I will get on that later today/tomorrow.

@marufmax No default imports are in vee-validate v3 and you don't need to Vue.use anymore.

@gkatsanos I planned to write one earlier this week, but it has been really tough for me to find the time. I will make sure one is up in two days god willing.

[gkatsanos]

We would be grateful ! We have to migrate a huge codebase for a big product and we want to take advantage of scopes. I want to validate a form which lives in a child component and I don't know how....

[Kabe0]

@logaretm

You take a look at the example I posted?

[logaretm]

@Kabe0 Sorry, I did take a look but did not work on a solution yet as I had little time this week. Will check it out and post an update.

[logaretm]

I have updated your example to be able to work with v3:

https://codesandbox.io/s/static-b80id

I would say this will get improved down the line as I still learning how the browser module system works, I might be able to provide a browser.esm bundle eventually.

[Kabe0]

@logaretm That would be great!

The basic way to think of browser modules is to think of them as isolated scopes, so to define a global you can explicitly import that global into the file. It's great in that you can technically have one VeeValidate module that uses 2.0 and another module that uses VeeValidate 3.0, however it does mean that it's a bit incompatible with some of the more common approaches to building JavaScript applications, where in the past most libraries could just assumed something was defined in a global.

[sven-ahrens]

To use a rule, I've to import it. I can also add a message for this rule--which can also have a placeholder which is then going to be resolved somehow.

For the rule min for instance, the placeholder takes the value after the :

But how am I gonna do it with the required rule or any other rule which does not specify a value?

extend('min', {
  ...min,
  message: 'This field must be {length} characters long'
})

This works perfectly fine! If min for instance is 8 min:8 it'll output: This field must be 8 characters long

However, if I do the same with the required rule:

extend('required', {
  ...required,
  message: 'The {field} is required.'
})

This does not work!

Output is The {field} is required. but it should be the name of the input or ValidationProvider.

Am I missing something?

Even the examples on https://logaretm.github.io output the same behaviour

[logaretm]

@sven-ahrens You missed this here:

https://logaretm.github.io/vee-validate/guide/localization.html#string-interpolation

The placeholder is {_field_} not {field}.

[sven-ahrens]

Works like a charm! Thank you very much! Shouldn't https://logaretm.github.io/vee-validate/ then be updated?

[logaretm]

Yep, you are correct. Will do it in a few minutes!

[robsonsobral]

For those wondering into this GitHub issue, more info on changes that took place can be found:

2191

https://www.baianat.com/labs/code/veevalidate-3-0

https://www.baianat.com/articles/veevalidate-3-0