nuxt-validate icon indicating copy to clipboard operation
nuxt-validate copied to clipboard

Configuration / options does not seem to take effect

Open simplenotezy opened this issue 4 years ago • 4 comments

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?

simplenotezy avatar Feb 27 '20 12:02 simplenotezy

Actually, it's now called "mode" instead of "events" it seems - and that works perfectly.

The "classes" property is the one not working.

simplenotezy avatar Feb 27 '20 12:02 simplenotezy

If I inspect the input it has classes, but it does not use the class-names provided in the config. It uses the native: "invalid" instead of "is-danger"

simplenotezy avatar Feb 27 '20 12:02 simplenotezy

@simplenotezy Did you find a way to use classes?

sowinski avatar May 06 '20 10:05 sowinski

Have you tried an option like this? nuxt.config.js

...
classes: true,
classNames: {
      valid: 'is-success',
      invalid: 'is-danger',
},
...

component

<ValidationProvider v-slot="{ classes, errors }" name="email" rules="required|email">
    <div class="control" :class="classes">
        <input v-model="email" type="text" placeholder="type some email" />
        <span>{{ errors[0] }}</span>
    </div>
</ValidationProvider>

itgelo avatar Sep 21 '20 07:09 itgelo