DEV Community

Discussion on: Quickstart guide for a new Vue.js project

View post
Collapse
 
rhymes profile image
rhymes • • Edited

Thanks for the writeup!

I used vuelidate for a while but switched to vee-validate for two reasons:

  • I had to keep back and forth from the component to the validations section to know if it was required, or not and so on. I have a couple of huge components/pages (800+ lines) and having an inline v-validate helps.

  • I couldn't find an easy way to know from the parent if any of the children had a "dirty" state. See this issue

I rewrote validation with vee-validate in a couple of hours and now I have a validation mixin which contains this:

  computed: {
    isFormDirty() {
      if (this.validatedFields) {
        return Object.keys(this.validatedFields).some(key => this.validatedFields[key].dirty)
      }
      return false
    },
    isFormInvalid() {
      if (this.validatedFields) {
        return Object.keys(this.validatedFields).some(key => this.validatedFields[key].invalid)
      }
      return false
    },
  },

Also defining custom validators is not that different from vuelidate:

// https://github.com/ogt/valid-url
import validUrl from 'valid-url'

Validator.extend('uri', {
  getMessage(field) {
    return `The field ${field} is not a valid URL.`
  },
  validate(value) {
    return !!validUrl.isUri(value)
  },
})
Collapse
 
lobo_tuerto profile image
Víctor Adrián •

Hey thanks for the pointer to that issue.

If later, what you mention becomes an impediment, I'll document the change/resolution on my article.

At least for now, Vuelidate covers all my expectations at two tenths of Vee-validate's size.

Collapse
 
rhymes profile image
rhymes •

Yeah, vee-validate it's definitely bigger :-(

I'll keep an eye on the github issue