Vee-validate: VeeValidate is a usability disaster

[stefang13]

I am responsible for UX/product in our company and we started using VeeValidate for our forms. Looking at live recordings, I can't help but think what a usability disaster the validation is.

The issue:

1. User focuses on the input field
2. Starts typing the required information
3. VeeValidate instantly fires an error message, while the user is still on the task and has not even completed it, which in return confuses them that they are doing something wrong (while in most cases they are not..)

This is quite problematic and looking at user recordings confusing, and in worst cases makes them abandon the task/form. Getting validation while completing the task is not ideal and should happen post-task (focus out or tab to next input field) especially that VeeValidate fires an error message right away.

I was told there is no real way of fixing this so wanted to raise the issue here and see what's possible?

[DanWithams7d]

This isn't really an issue with as this is the expected behaviour but I will share what we do on our applications;

VeeValidate provides several slot props which help you determine the state of the Input which is being validated. We only display error messages to the use if the field has been blurred, which we can determine from the 'touched' slot prop.

There are lots of other state slot props you can use to achieve the UX that you want.

I was told there is no real way of fixing this so wanted to raise the issue here and see what's possible?

There is always usually a way to do something like this. When we first started using VeeValidate we recognised the same issue as you and were able to implement a better behaviour same-day. I would be a little concerned about whomever is advising you that there is no real way of fixing it, as it was pretty obvious to us that VeeValidate has the tools for us to completely control the behaviour as we wanted. It may not work the way you want it to out of the box, but it is certainly achievable.

[logaretm]

Thanks @DanWithams7d for answering.

@stefang13 I think what you were told is way off, vee-validate is indeed aggressive by default. This is intended as most users will use such behavior even though it is not the best one.

However you can do whatever you want, when vee-validate reports an input has error you can choose not to show it by implementing the logic of "when to show errors" yourself, vee-validate offers validation flags that will allow you to do so.

https://logaretm.github.io/vee-validate/guide/validation-provider.html#validation-flags

VeeValidate also has the idea of "interaction modes" which has a dedicated section on UX in the documentation:

https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html#interaction-modes

[hellboy81]

+infinity thumbs up and only one down.

[Drumstix42]

Here's my preferred use:

import { setInteractionMode } from 'vee-validate';

/**
 * Similar to the built-in `eager` mode
 * will first check if input is dirty before flagging it as invalid on initial touch
 */
const eagerDirtyValidation = args => {
    const { errors, flags } = args;
    if (errors.length) {
        return {
            on: ['input', 'change'],
        };
    }
    if (flags.dirty) {
        return {
            on: ['change', 'blur'],
        };
    }
    return {
        on: [],
    };
};

// set the global default mode
setInteractionMode('eagerDirty', eagerDirtyValidation);