Recording user invalidations

[ooOsH]

Looking to record user input errors via analytics to help improve 'pain point' fields in the future. Is it possible when validating via form refs to access the validator and get these errors?

[logaretm]

That's an interesting use-case, which version of vee-validate are you using/looking to use?

[ooOsH]

It's something we use on an older system we are migrating away from, very handy. Using Version 3x.

[logaretm]

I think it is possible but it depends on how efficient you want it to be, the easiest way to go about it would be to create a higher-order function wrapper around the default extend method and use it instead to bake in analytic reporting.

So something along the lines of:

import { extend } from 'vee-validate';

function extendWithReporter(ruleName, rule) {
  const ruleFn = rule.validate;
  async function validateAndReport(...args) {
    const result = await ruleFn(...args);
    // rules returning messages are considered invalid
   if (typeof result === 'string' || !result) {
     // TODO: report to your analytics
   }
    
     return result;
  }

  extend(ruleName, {
    ...rule,
    rule.validate
  });
}

and so you would use it like this:

import extendWithReporter from '@/someplace';
import { required, email } from 'vee-validate/dist/rules';

extendWithReporter('email', email);
extendWithReporter('required', required);

[ooOsH]

@logaretm thank you, I'm going to test it out today!