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?

Protectionist

Answer 1

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

Dissimilation

Answer 2

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!

Carillon

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 – Protectionist