managing vuelidate validations in vuetify

Question

How are you guys doing validations in Vuetify? I'm not able to wrap my head around very verbose validation syntax.

I'm using Vuelidate and as per Vuetify's docs, here is how I'd have to implement a simple required field:

Script:

import { required } from 'vuelidate/lib/validators';

computed: {
    userNameErrors() {
      const errors = []
      if (!this.$v.loginForm.userName.$dirty) {
        return errors
      }
      !this.$v.loginForm.userName.required && errors.push('This field is required')
      return errors
    }
},
validations: {
    loginForm: {
      userName: {
        required
      }
    }
  }

Template:

 <v-text-field :label="Username"
                    prepend-icon="account_circle"
                    v-model="loginForm.userName"
                    :error-messages="userNameErrors"
                    @input="$v.loginForm.userName.$touch()"
                    @blur="$v.loginForm.userName.$touch()"
                    :required="true"></v-text-field>

Which I feel is very verbose. I might be doing things wrong way, can anyone tell how have you made this minimalist or short hand?

score 3 · Answer 1 · answered Jul 25 '19 at 15:41

3

I'm just suggesting here, but using vuelidate-errors-extractor make it a little bit simpler

answered Jul 25 '19 at 15:41

mandaputtra

922
3
18
36

score 2 · Answer 2 · answered Feb 01 '18 at 08:05

I came up with the following solution to handle generic validations:

function handleErrors(fieldName, vueObj) {
  const errors = []
  if (!vueObj.$v[fieldName].$dirty) return errors
  if ('email' in vueObj.$v[fieldName]) {
    !vueObj.$v[fieldName].email && errors.push('This email address is invalid')
  }
  if ('required' in vueObj.$v[fieldName]) {
    !vueObj.$v[fieldName].required && errors.push('This field is required')
  }
  if (fieldName in vueObj.serverErrors) {
    vueObj.serverErrors[fieldName].forEach(error => {
      errors.push(error)  
    });
  }
  return errors
}

Then it can be used like this in your Vue object:

...
computed: {
    emailErrors () {
      return handleErrors('email', this)
    },
  },
...

Then you have to handle the possible error types in handleError (required and email validators are handled in the example). I'm also using this to show field errors returned from the backend.

I'm also curious if this can be solved easier!

thank you for the answer but not something I was expecting. This is generic function but not something that'd handle nested validations. I was expecting some vue directive or anything that'd automagically handle such cases. As ng-messages do it (if you've seen) anyways I'll try to comeup with some solution — pranavjindal999, Feb 01 '18 at 08:31

managing vuelidate validations in vuetify

2 Answers2