Yup: Dynamic messages

[ziflex]

Hi there!
First of all, I would like to thank you guys for this incredible library - it really makes validation very easy.

Second, I would like to ask whether it's possible to show message in more dynamic fashion?

The reason why I need is that I'm doing a uniqueness check making a backend call which returns a result with some data that should be used in error message.
I know that yup allows you to define params that can be used in messages but it's more static approach.
It would be really cool if we could provide a function as a message that would receive these params, validation results and a value in order to generate a desired error message.

[jquense]

It would be really cool if we could provide a function as a message that would receive these params

you can do that 👍

[ziflex]

@jquense after reading the source code I figured it out, thanks! Needs to update the docs :)

Wondering is there a better way of passing some dynamic data to the function?
Currently I'm doing pretty ugly stuff like having a proxy object which keeps the required data from the server:

    const proxy = {};
    const message: any = (opts: any) => {
        const conflict = proxy[opts.value];

        delete proxy[opts.value];

        return `This code is already associated with ${conflict.type} "${
            conflict.name
        }"`;
    };

    return {
        message,
        name: "isUnique",
        test: async function isUniqueTest(): Promise<boolean> {
            const out = await isUnique(this.parent);

            if (out.conflict) {
                proxy[this.parent.code] = out.conflict;
            }

            return out.result;
        },
    };

[jgoux]

This seems complicated indeed.

I'm not sure I understand how the params key works in the options object passed to test.

For example, I'd like to get the value passed to the test to be able to have a default message like this :
${value} already exists

Here is how I tried to add the 'unique' method :

yup.addMethod(yup.mixed, 'unique', function unique(...args) {
  const test = args.length === 1 ? args[0] : args[1]
  const message = args.length === 1 ? mixed.unique : args[0]
  return this.test({ name: 'unique', test, message, params: { value: '' /* How do I get the value passed to test() ? */ } })
})

Something like params: value => ({ customValue: value }) would be useful!

[jquense]

messages are passed value, originalValue, path, label automatically, so you don't need to do anything to access them. anything else you want access to in the error message pass in as params

[jquense]

@ziflex no need to to be taht fancy. this.createError is provided in on the function context for customizing the rendered message, you can override or extend any of the values and return the error in the test.

https://github.com/jquense/yup/blob/master/src/util/createValidation.js#L31

[jgoux]

@jquense That's great then! Thanks for the answer 👍

[ziflex]

@jquense thanks! I didn't notice that the function is available in the context.