Vuetify: Ability to set error state for text field via parameter

[karudo]

I think rules prop of v-text-field is unnecessary functionality, because in most cases we have to validate our form values not in text fields components.
Just imagine if you need to disable submit button before all you inputs do not have errors. With current v-text-field api you have to run validations twice.
So, I suggest add new boolean prop error to v-text-field. If error is true the field should look like field with error.

[johnleider]

I disagree with the opinion of it being unnecessary. As far as allowing the developer to manually set the error state, you could do that with a class, input-group--error. I suppose I could put that into a prop, but I'm not entirely sure.

[karudo]

Consider splitting the component v-text-field for two:

1. Functional component without own state which just render full input group
2. Component with state which wraps first component. This component should take rules prop, execute rules and then set state to first component

[johnleider]

It sounds good in theory, but early on in this project, there was similar functionality that existed for many components. What it leads to is chaining down of information which becomes unnecessary bloat as the number of these components being used increases.

[karudo]

Using input-group--error helps only partially, because the hint text don't becomes red. Also it's bad practice. If you change name of this class in next version, what shall developer do? If you change component prop, you will change the documentation. But I doubt you document all internal changes.

Splitting code for small components gives a flexibility to a framework. Developers can only use the parts they need without inventing method of interaction with one big component.

[johnleider]

I completely agree with you, that's why most of the framework is split into those individual instances. Form components are slightly different right now due to the complexities involved with supporting the various styles and functionality that comes with each one.

Could it be improved? There is _always_ room for improvement, so yes. This will be something we can look into after 0.12.0.

[Christilut]

Personally I use vuelidate for validation which I think is the perfect way to do it but Vuetify doesnt give me the flexibility to set error states manually.

Maybe check out vuelidate (and maybe vee-validate since its also popular) and see if there is a way to satisfy both libraries?

[johnleider]

I've added the ability to manually set the error state and even pass in a string or array of strings for your own custom errors. The errors prop will not trigger component validation.

[karudo]

Thanks a lot! Please don't forget about same thing for selects and other form components :-)

[johnleider]

This change affects all form components

On Jun 3, 2017 12:05 AM, "Deonis Peretyagin" [e-mail]
wrote:

Thanks a lot! Please don't forget about same thing for selects and other
form components :-)

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/545#issuecomment-305949361,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgibNX6SIETr3kV2rQuNNCSCgJjIjks5sANuegaJpZM4Nbd5E
.

[karudo]

Great! Looking forward to release.

[matt-e-king]

(@johnleider I understand this this issue has been closed, but I felt it might help to comment here to keep the context)

I'm very glad to see this change in place, I in-fact asked about this a while back #361.

Unfortunately though, this conflicts with Vee-Validate (and maybe other popular validation libraries) because Vee-Validate appends an errors() computed property to each input being validated. Functionally, everything will still works, but the console fills with Vue Warn since errors is already defined as a prop.

Any thoughts on how this can be avoided? (I can move this into a separate issue if you deem it necessary)

[johnleider]

Looks like I need to change the name! Any suggestions? Naming is the hardest part.

[matt-e-king]

Naming sucks! My first thought would be some type of name space to make it unique to Vuetify, but you're not really doing that anywhere else and it could be a little cumbersome for a prop name.

Hmm...
errorMessage
errorMessages
errorMsgs
errorList

?

[johnleider]

I like errorMessages. I'll do that tonight.

[matt-e-king]

Awesome! Thanks so much for your hard work!

[matt-e-king]

@johnleider FYI just came across this:

https://github.com/baianat/vee-validate/issues/563#issuecomment-307559214

Didn't realize we could change the "errorBag" in VeeValidate. So there is a solution to this problem if you wanted to revert https://github.com/vuetifyjs/vuetify/commit/12e330ecfa73b6a57fa34d8f7faafca84323be51

Thanks!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord