Vuetify: Feature: Form Validate

[thearabbit]

Request Form Validate: builtin or use any package such as Vee-Validate.
💯

[mfferreira]

@thearabbit You can use rules to validate your inputs.

https://vuetifyjs.com/components/text-fields

[thearabbit]

thank for your reply.
could example, I don't understand on doc?

[thearabbit]

use this Async Validator???

[jamesxv7]

@thearabbit here is a brief example how to use Vee-Validate with Vuetify.

To use the rule property, the trick is to remember that for the rules you can use an array of functions. Refer to the following example to see how you can use it to validate a required field.

I hope the examples have been useful

[thearabbit]

Very thanks @jamesxv7, Look great

[thearabbit]

Tonight, I custom like this
Vuetify + Vee-Validateion

[cannap]

Hi, when i try to use vee-validation i get this warning

console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js:1 [Vue warn]: The computed property "errors" is already defined in data.

when i add

Vue.use(VeeValidate, {
  locale: 'de'
})

[abelovic]

I see this too (you don't even need to add the locale). Any idea what is causing this?

You can see it in the example by @thearabbit

[nekosaur]

I would hazard that vee-validate add an errors property to all components, which collides with the one vuetify itself adds to input components.

[mige]

@abelovic @cannap Change the error property name:
Vue.use(VeeValidate, { errorBagName: 'veeErrors' })

[abelovic]

@mige - thank you!

[thearabbit]

Now I try with picker date.
It have problem when picker date selected, form is validated (equal click submit btn).

[smyth64]

@mige thanks man! made my day :D

[guyver-dash]

@jamesxv7 Thanks.

[guyver-dash]

@jamesxv7 How not to validate during initialization?I've tried it but failed... It displays the error in untouch. TY

[jamesxv7]

@bobbygerez What do you mena by "not to validate during initialization"? The example trigger the validation on the click event of the button.

[guyver-dash]

@jamesxv7 No the validation triggers directly after clicking the button... See photo

[jamesxv7]

@bobbygerez What button? The validation should be trigger by the login button. Can you share a example of your code?

[guyver-dash]

@jamesxv7 Here is my code.
<v-text-field label="Email" required v-model="email" :rules="veeErrors.email"></v-text-field>

 data(){
        return {
              validationRules: {
                password: 'required',
                email: 'required|email',
             },
        }
  },
computed: {

         veeErrors() {
          let errors = {}
          Object.keys(this.validationRules).forEach(key => {
            if (!errors[key]) {
              errors[key] = []
            }

            this.validator.validate(key, this[key]).catch(() => {})

          })

          this.validator.getErrors().errors.forEach(error => {
            errors[error.field].push(error.msg)
          })
          return errors
        }
  }

:rules="veeErrors.email" triggers directly even without clicking the textbox (untouch) because it's a computed property, I think. How to make it blur event and validate? or when they start typing. TY

[jamesxv7]

@bobbygerez First thing, for this particular case is better to use a method and not a computed property. I know the gist example use a computed property but the following example is better suited for your use case https://codepen.io/jamespr/pen/VbPZjg

Regards!

[guyver-dash]

@jamesxv7 Thanks... works like a charm!

[andreixk]

is there a documentation for the default vuetify form validation rules?

[nekosaur]

There are no default rules.

[andreixk]

the rules shown in the examples are neither from vee-validate nor from vuelidate. so i'm assuming vuetify is the one that processes those rules?

[nekosaur]

Yes, vuetify has an internal (simple) validation engine, but there are no pre-defined rules shipped with it.

The rules prop takes an array of function in the form of (value) => boolean || string

If the function returns true, the rule passes. If the function returns false, or a string, it fails. The returned string is used as the error message.

[andreixk]

But is there a more detailed documentation or examples? For example if I want to check that password and confirmation match or more advanced error checking, e.g. check if entered date is present in the "dates" prop ?

[nekosaur]

It's possible you could cobble something together using the internal engine, but for anything complex I would recommend you use an external validation library.

[qiuzuhui]

Is there any way to do async validation? Like check email already registered by the server side.

[niutech]

There is a workaround for async validation using watch.

[rahul1235]

any example using vuetify?

[escapedcat]

@rahul1235 example for what exactly?