Add $success value which is the opposite of $error

[johnnynotsolucky]

Add $success value which is the opposite of $error

[Frizi]

Hi!
I'd like to limit the number of those special values for a few reasons. First, to keep things simple for beginners, second to keep it readable. But I definitely can see the benefit you present here.

If your use case is local to a specific component, you can just create an method, like

isSuccess(v) {
   return !v.$invalid && v.$dirty
}

So you can then use it in similar way to what you proposed.

<input v-model="value :class="{ success: isSuccess($v.value), $v.error: value.$error }" />

For anything more global, this could be imported per module or adapted as a mixin.

You could also try your luck by adding validators to validate other validators. It should work (that's the princible behind validation groups), but I wouldn't recommend that because of lack of clarity and better existing options.

Alternatively, a possible extension point could be added to Vuelidate to allow adding custom computed values into the validation. You have to keep in mind though that inner vm instance is not exactly the same as exposed object. There is one more proxy object in play and it is actually necessary to avoid name collisions or for async validators to work. I wouldn't like to expose internals to public API.

[johnnynotsolucky]

Thanks for the feedback!

It never crossed my mind to use a mixin, that should work perfectly.

I think the last point might be overkill; exposing internals to the public API might make it harder to make non-breaking changes to Vuelidate in the future, and like you said, the API currently is simple and logical.

[cypherix93]

Please reconsider this request, as it will be very beneficial when using Vuelidate with libraries such as Bootstrap, that has distinct validation states for form inputs. Having a $success shortcut would be immensely useful.

[jpickwell]

Why not use !$v.value.$error?