Validate a field depending on other (NOT equality)

[damianrr]

Hello guys,

I've a schema with a type_of_account field and a account_number field. Depending on the type_of_account I've a regex to apply to the account_number field. Reading through this: jaredpalmer/formik#90 and this: #97 I was able to solve it like this:

const validations = {
  account_1: {
    regex: /\w{8}/,
    example: "00000000"
  },
  account_2: {
    regex: /\w{3}/,
    example: "000"
  }
};

const schema = Yup.object({
  type_of_account: Yup.string(),
  account_number: Yup.string().validateAccountNumberFormat(
    Yup.ref("type_of_account")
  )
});

function validateAccountNumberFormat(ref, msg) {
  return this.test({
    name: "validateAccountNumberFormat",
    exclusive: false,
    message: msg || "Invalid format",
    test: value => value.match(validations[this.resolve(ref)].regex)
  });
}
Yup.addMethod(
  Yup.string,
  "validateAccountNumberFormat",
  validateAccountNumberFormat
)

This works beautifully with the sole problem that, in case of an input error (for example, selecting account_1 and entering only 3 characters) the user will get the generic "Invalid format" error, I'd very much like to display something like "Invalid format, use something like this: 00000000". For that I have the property example in the validations object and tried add the ref to the parameters for displaying on the field, something like:

...
    return this.test({                                                                                                                  
      name: "validateAccountNumberFormat",                                                                                              
      exclusive: false,                                                                                                                 
      message: msg || "Invalid format, use something like this ${example}",
      params: {
        example: this.resolve(ref),
      },                                                                                                 
      test: value => value.match(validations[this.resolve(ref)].regex))                                                            
    }); 
}
...

Yet, this doesn't work, seems like this promise (ref) isn't available for resolve at this point. So ... how can I do something like this?

Thanks!

[jquense]

use this.createError()inside your test function, you can pass it params, and it will override/extend the existing ones, but at that point resolve will work.

[damianrr]

Thanks for the quick response @jquense; it works like a charm!