Hi,

how can I change the language of nuxt-validate?
I also use nuxt-i18n.

In the readme there is the following line:

notice: If you use nuxt-i18n module, declare the nuxt-validate module at before it.
So my modules look like that at the moment.

  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module',
    '@nuxtjs/sentry',
    'nuxt-validate',
    'nuxt-i18n'
  ],

So this is correct, right?

1. How can I change the language statically to for example french.
2. Why is nuxt-validate not picking the language from nuxt-i18n. What additional steps do I need?

Thank you!

What happened?
"bundleDependencies": false,
"dependencies": {
"vee-validate": "^2.1.2"
},

Compare the vee-validate dependencie with the one of the repository.
In your repository it is 3.0.8 but if you install it via npm it is 2.1.2 (which has bugs)

npm version is 0.1.3, but package.json's version is 0.1.2
https://www.npmjs.com/package/nuxt-validate
https://github.com/lewyuburi/nuxt-validate/blob/master/package.json#L3

Cannot get it to work.

WARN  in ./.nuxt/vee-validate.js

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

modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
"@nuxtjs/dotenv",
'@nuxtjs/proxy',
'@nuxtjs/auth',
'nuxt-i18n',
'nuxt-validate'
],

Package version was never bumped and published to NPM when vee-validate dependency was upgraded from v2 to v3. This means we're essentially stuck on [email protected] unless we manually override it.

If this package is still maintained, please publish it.

nuxt.config.js

module.exports = {
/// 
  /*
   ** Plugins to load beforve mounting the App
   */
  plugins: ["~plugins/validate.js"],
///
}

Alright, but how do you add a validation message?

/plugins/validate

	app.validator.extend('date', {
		validate: (value) => /^\d{2}([./-])\d{2}\1\d{2}$/.test(value),
		message: 'The {_field_} should be a valid date',
	});
};```

Still outputs the default error message: "The Start Date value is not valid"

I have 3 custom validators I need to add:

VeeValidate.Validator.extend('mobile', function (value) {
      var numbers = /^07[1-57-9]{1}[0-9]{8}$/
      var drama = /^07700900[0-9]{3}$/
      if (numbers.test(value) && !drama.test(value)) return true
      return false
    });
    VeeValidate.Validator.extend('dobAge', function (value, formData) {
      var data = formData
      var today = new Date()
      var birth = new Date(data['AppDOBYear'], parseInt(data['AppDOBMonth']) - 1, data['AppDOBDay'])
      var age = today.getFullYear() - birth.getFullYear()
      var month = today.getMonth() - birth.getMonth()
      if (month < 0 || month === 0 && today.getDate() < birth.getDate()) age--
      return age < 18 ? false : true
    });
    VeeValidate.Validator.extend('preventNumbers', function (value) {
      return value.match(/[0-9]/) ? false : true
    });

How can I add these?

Hi, vee-validate 3 was released, are there any plans to update this nuxt plugin?

I've set up my form in a similar manner to this: https://logaretm.github.io/vee-validate/guide/forms.html#validate-before-submit

However when I use the ValidationObserver the invalid and handleSubmit slots don't seem to work? When I submit the form wrapped in the handleSubmit method I get handleSubmit is not a function. Also my button is not disabled by default with the invalid slot.

Everything else seems fine so I'm not sure if I'm missing something. Any help would be great, thanks!

Hi, can we use multi language and set it in modules section?

Hello,

You do not have any documentation on how to contribute to this project.
Could you provide any guidelines, please?

Version on NPM is seriously outdated. Please update

See title. 0.1.2 doesn't have the fix. Thanks!

I created a file in plugins and added it to nuxt.config but I get export 'extend' was not found in 'vee-validate'

// ~/plugins/validate.js

import { extend } from 'vee-validate'

extend('postCode', (value) => {
  const reg = /^\d+$/
  if (value.length === 10 && reg.test(value)) {
    return true
  }
  return "{_field_}"
})

I have defined rules like so (two places, becasue I am unsure which -- not clear according to documentation):

	['nuxt-validate', {
		lang: 'en',
		rules: ['email', 'min', 'max', 'confirmed', 'numeric'],
		nuxti18n: {
			locale: {
				'da': 'da',
				'en': 'en'
			},
			rules: ['email', 'min', 'max', 'confirmed', 'numeric']
		},
		mode: 'eager',
		classes: {
			valid: 'is-success',
			invalid: 'is-danger'
		}
		// regular vee-validate options
		// https://github.com/logaretm/vee-validate/blob/master/docs/configuration.md
	}],

However, ALL rules are still being imported. For instance, I can use "digits" rule in my code without issues.

I have tried customizing the options, like below:

	['nuxt-validate', {
		lang: 'en',
		rules: ['email', 'min', 'max', 'confirmed'],
		nuxti18n: {
			locale: {
				'da': 'da',
				'en': 'en'
			},
			rules: ['email', 'min', 'max', 'confirmed']
		},
		events: 'change',
		classes: {
			valid: 'is-success',
			invalid: 'is-danger'
		}
		// regular vee-validate options
		// https://github.com/logaretm/vee-validate/blob/master/docs/configuration.md
	}],

But classes / events are not being registered. What am I doing wrong?

Hi,

I need vee-validate only on some specific pages. But vee-validate will be loaded on every page.
I want to reduce the size of my entry point by load vee-validate lazy only on components which really need this library.

How can I do this?

Thank you

Hi,

is it possible to use somehow mode: lazy with your library?

Thanks

Trying to use cross-field validation to validate a password and password confirmation field but it's not working, the target/ref to refer doesn't actually return its value.

On the template I have:

<validation-observer ref="observer" v-slot="{invalid}" class="validation-observer" @submit.prevent="validate">
  <form class="standard-form">
    <div class="form-row">
      <div class="form-item">
        <h-text-field v-model="form.password" type="password" name="password" label="Password:" placeholder="Password" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <h-text-field v-model="form.password_confirmation" type="password" name="password_confirmation" label="Password Confirmation:" placeholder="Password Confirmation" />
      </div>
    </div>
    <button class="modern-cta-btn">
      Submit
    </button>
  </form>
</validation-observer>

the <h-text-field/> component simply renders a <ValidationProvider> with the rules for the fields and the name provided as prop.

And the rules are:

	password: 'required|password:password_confirmation',
	password_confirmation: 'required',

As per https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields I reference the password_confirmation (the name of the ValidationProvider) as an argument to that validation rule.

The validation rule:

/plugins/vee-validate.js

export default ({app}) => {
	app.validator.extend('password', {
                 params: ['target'],
		validate(value, [target]) {
			console.log('e: ', target);
			return true;
		},
		getMessage: () => 'Password confirmation does not match',
	});
}

The target always logs the name of the param password_confirmation instead of the actual value of that field

An overview of the setup

The last two fields are the password and the password confirmation

Does installing nuxt-validate requires to import ValidationProvider components or am I doing something wrong?

Here is my nuxt.config.js

modules: [ 'nuxt-validate'],
nuxtValidate: {
lang: 'en',
},

Hi.

I'm trying to create a custom rule for a password confirmation without success if someone can help me ?

I have inserted in my nuxt.config.js

  plugins: ['~plugins/vee-password.js'],

In plugins/vee-password.js

import { extend } from 'vee-validate'

extend('password', {
  params: ['target'],
  validate (value, { target }) {
    return value === target
  },
  message: 'Password confirmation does not match'
})

And when I start my app I have this error :

Doc that I have found for this : https://github.com/lewyuburi/nuxt-validate#faq
Thx a lot ;p

How do I access the vee-validate config object ?
I tried from the modules:
modules:[ ['nuxt-validate',{ fieldsBagName: 'vFields' } ]

but that doesnt work

Hello.
Thank you for a wonderful plugin.

I introduced a plugin and saw it.
However, the language option is not reflected.

I moved "Validator.localize" of plugin.js to the last line, the language was reflected.

Please consider examining the correction.

I am sorry for my poor English.

Related to #4, maybe I'm doing something wrong because I get this error:

  Error: Could not compile template
  /home/paolo/devel/projects/bvk/node_modules/nuxt-validate/plugin.js:
  validatorLocale is not defined

nuxt.conf.js:

    ['nuxt-validate', {
      lang: 'it',
      nuxti18n: true
    }],
    ['nuxt-i18n', {
      lazy: true,
      langDir: 'i18n/',
      strategy: 'prefix_except_default',
      defaultLocale: 'it',
      locales: [
        {
          code: 'it',
          iso: 'it',
          name: 'IT',
          file: 'it.js',
        },
        {
          code: 'en',
          iso: 'en',
          name: 'EN',
          file: 'en.js',
        }
      ]
    }]
  ],

Any help?

How can i set custom error messages?
i'm useing nuxt-i18n and obviuslly nuxt-validate, anyone can bring me an example please?

Does this module provide easy access to validation components (ValidationObserver, ValidationProvider and their instances)? I don't think so, at least I was unable to import them successfully from nuxt-validate therefore I ended up using vee-validate "manually" as my custom plugin, so I can do this now:

import { Component, Vue } from 'vue-property-decorator'
import { ValidationObserver, ValidationObserverInstance, ValidationProvider } from 'vee-validate'

@Component({
  components: {
    ValidationObserver,
    ValidationProvider,
  },
})
export default class Login extends Vue {
  $refs: {
    form: ValidationObserverInstance;
  }
  ...
}

Am I missing something? If not, would it be possible to make this available through nuxt-validate as well?

I have a nuxt project with nuxt-validate and nuxt-i18n.
Nuxt-i18n is configured to use a separate .json file with a custom langDir. When I try to use nuxt-validate, the locale switches correctly but the messages are not used from my translation file. I have used the standard root node "validations" and hoped it would be a plug and play solution but it's not..

['nuxt-validate', {
      rules: ['required'],
      nuxti18n: true
}],
['nuxt-i18n', {
      locales: [
        {
          name: 'Nederlands',
          code: 'nl',
          iso: 'nl-NL',
          file: 'nl.json'
        }
      ],
      langDir: 'i18n/',
      defaultLocale: 'nl',
      lazy: true,
      strategy: 'prefix_except_default'
    }],

I have also tried the vee-validate 3 fork from mole-inc but to no avail.

Any help would be much appreciated.

Hi :)
How to have validate on a separate chunk ?

Stay safe

Hey,

I'm curious if it'd be possible to integrate localization together with nuxt-i18n. Vee-validate already works together with vue-i18n (see here), so I guess it's possible 🤔

please update to vee-validate 2.2.7

If I make some changes in nuxt.config.js when the dev-server is running, the dev-server rebuilds the project automatically and I get the error:

ERROR MomentLocalesPlugin: Moment.js doesn’t include a locale you specified: ru. Check the plugin’s localesToKeep option. 14:07:13
You can see the full list of locales that Moment.js includes in node_modules/moment/locale/
You can see the full list of locales that Moment.js includes in node_modules/moment/locale/
at normalizeLocalesToKeep (node_modules/moment-locales-webpack-plugin/index.js:67:15)
at checkOptions (node_modules/moment-locales-webpack-plugin/index.js:31:25)
at new MomentLocalesPlugin (node_modules/moment-locales-webpack-plugin/index.js:87:29)
at WebpackBundler.extendBuild (node_modules/@nuxtjs/moment/lib/module.js:18:25)
at WebpackBundler. (node_modules/@nuxt/utils/dist/utils.js:1812:25)
at WebpackClientConfig.extendConfig (node_modules/@nuxt/webpack/dist/webpack.js:4766:37)
at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:4796:45)
at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:4965:26)
at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:5267:19)
at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5274:12)
at Builder.build (node_modules/@nuxt/builder/dist/builder.js:5578:30)

If I stop the dev-server and run it again (nuxt build) the error does not appear.

My config:
['nuxt-validate', {lang: 'ru'}],