[feature request]Simplify validation API

[JounQin]

[feature request]Simplify validation API

[Frizi]

Your proposal would require to add a validator registration step. What {minLength: 4} means on its own? Current API relies on the fact that all validators are simple functions that you can simply import and all labels in the object are just validation names. It allows you to use any validator functions from any library you want or even use same validator multiple times with different settings.

Take that as an example:

name: {
  required,
  barelyTooShort: minLength(6),
  minLength: minLength(5)
}

Now you can use two separate error messages and display to the user something like

Just one more character

span.form-group__message(v-if="!$v.name.required") Name is required
span.form-group__message(v-else-if="!$v.name.minLength") Name is too short
span.form-group__message(v-else-if="!$v.name.barelyTooShort") Just one more character

[Frizi]

I would like to avoid a need of additional registration in any form. You don't even have to Vue.install this plugin, it supports being used as a standalone mixin, for those who want to import it directly in every component that needs it ;)

Explicit imports on every point of usage are a good thing for you. That way any validator you don't use won't be compiled into your app's bundle and you don't have to remember to cleanup or add new dependency somewhere in the configuration. It's also much easier and faster to get started.

You usually want to avoid importing the whole set of validators anyway. Just do this with any bundler that supports tree-shaking and you are both concise and safe.

import { required, minLength } from 'vuelidate/lib/validators'

[shentao]

@JounQin My point is – we want the validators to not affect the total bundle size. If we would include all of them now – that’s not a problem as there are just a few of them. However, as we plan to expand the validators (and utils) significantly that would very soon become an antipattern in terms of bundle size. Thus encouraging people to register everything up front would make it worse for the users. So if we can avoid a suboptimal solution then I guess we should.

Also, this would introduce a different way to declare validators which could potentially confuse less experienced people. As it is right now – I guess – it’s pretty straightforward, as validators are just functions. No magic inside.

Anyway, congrats on the v-validator! 👍

[JounQin]

There is no conflict.

If the value of validations is function, call it, if not, pass the value to the exist validator with same name of the key.

And also, we should be able to extend global validators by ourselves.

name: {
  required: true,
  barelyTooShort(val) {
    return minLength(6)(val)
  },
  // `barelyTooShort: minLength(6)` is also fine
  minLength: 5,
  between: [2,3] // which will call `between(2,3)` inside
}

Besides, for now there is no error message ecosystem, I prefer an API like jquery-validate.

{
  ...other,
  validations: {
    rules:{},  // if there is no key named `rules`, treat the whole validator object as rules.
    messages:{}
  }
}

[mubaidr]

@JounQin This issue is being discussed here #3

[Frizi]

@JounQin You still forgot about one detail.

If the value of validations is function, call it, if not, pass the value to the exist validator with same name of the key.

Vuelidate doesn't know anything about validators. It's totally decoupled. We have no internal list of names pointing to specific functions. Having that would defeat the purpose, as now you have to register all of those somehow. Moreover, adding all builtin validators to a list like that would force us to import all of them with the core library. What's the purpose? Current syntax leaves that decoupled. You have to import and pass the function. Simple as that.
If you don't like the need to specify the label of the object, you can always prepare the function beforehand.

import minLength from 'vuelidate/lib/validators/minLength'

const nameMinLength = minLength(6)

export default {
  data () {
    name: ''
  },
  validators: {
    name: {
      required,
      nameMinLength
    }
  }
}

You can even prepare a few common validators like that in separate module and import them directly.

[JounQin]

We can provide a few or none built-in validators, but the user can imports their needed validators when they install the plugin at the first time globally.

import Vuelidate from 'vuelidate'
import validators from 'vuelidate/lib/validators'

Vue.use(Vuelidate, {
  validators
})

// in Vuelidate
const validators = {}

export default {
  install(Vue, options = {}) {
    Object.assign(validators, options.validators)
    // ... then if calling validator is function, call it, else try the same named validator in validators.
  }
}

My point is that, for now we must import every validator by ourselves in every component, it is too long-winded and unnecessary. There will be a lot of duplicate codes of validators.

Maybe I am too lazy. And my purpose is to write less code but do more. :)

This is also why we are looking for a third-party plugin to validate.

[shentao]

What @Frizi said actually ^

[JounQin]

I've said it is OK to use the original grammar in my scenario, but for the other people, they can try another experience.

You usually want to avoid importing the whole set of validators anyway. Just do this with any bundler that supports tree-shaking and you are both concise and safe.

Of course I know that, but it's so stupid to write something like import { required, minLength } from 'vuelidate/lib/validators' everywhere for me what means it will add a few bytes in every chunk file.

Actually it just needs to add a few lines(less than 10) in the core code what will make it possible and short the API.

Anyway, I've finished a very early alpha version of v-validator which is totally under my control. :)