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';

puted: {
    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?

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';

puted: {
    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?

• javascript
• vue.js
• vuejs2
• vuetify.js
• vuelidate

2 Answers 2

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

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:

...
puted: {
    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!