Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

managing vuelidate validations in vuetify

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?

like image 986
pranavjindal999 Avatar asked Jan 31 '18 05:01

pranavjindal999


People also ask

How do I add validation to Vuetify?

To add Vuetify, navigate to the project folder cd vuetify-form-validation. When the Vuetify command starts running, it'll again ask to select which preset you want. Select the default preset.

What is Vuelidate?

Vuelidate 2 is a simple, but powerful, lightweight model-based validation for Vue.js 3 and 2. Vuelidate is considered model-based because the validation rules are defined next to your data, and the validation tree structure matches the data model structure. Vuelidate v2.0 supports both Vue 3.0 and Vue 2.x**

How do I reset my Vuelidate?

Using Vuelidate you can reset the validation errors by using this. $v. $reset() . In this Codepen example resetting the lastName field that uses a Vuetify component works - $invalid is true while $error is set to false.


2 Answers

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

like image 76
mandaputtra Avatar answered Sep 18 '22 09:09

mandaputtra


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!

like image 43
codwell Avatar answered Sep 22 '22 09:09

codwell