revalidate icon indicating copy to clipboard operation
revalidate copied to clipboard

Ability to translate error messages

Open texodont opened this issue 7 years ago • 5 comments

Hi! Thanks for this great library, validation becomes really enjoyable.

Is it possible to change default error messages (to support different languages for example) without copy-paste all validator or passing custom message on every use?

texodont avatar Sep 21 '16 04:09 texodont

+1

badlamer avatar Sep 21 '16 08:09 badlamer

Hi, @texodont!

Currently, there isn't a way to change the default message, but it should be trivial to update createValidator to allow this. We could always attach the default message creator as a property on the validator and then easily update it that way. However, I think adding in a clone/duplicate feature would be nice. That way, there could eventually be defaults for different languages exposed in nested libs like revalidate/validators/es as an example for Spanish.

Basically, changing createValidator to do something like this should work

export default function createValidator(curriedDefinition, defaultMessageCreator) {
  // ...

  function validator(config, value, allValues) {
    // ...
  }

  function clone(newDefaultMessageCreator) {
    return createValidator(curriedDefinition, newDefaultMessageCreator);
  }

  validator.clone = clone;

  return validator;
}

// Later on

const esNecesario = isRequired.clone(field => `${field} es necesario`);

isRequired('Foo')();  // Foo is required
esNecesario('Foo')(); // Foo es necesario

Would you find something like that to be useful? Thanks for the idea!

jfairbank avatar Sep 21 '16 14:09 jfairbank

@jfairbank I like the simplicity of your solution above, but it has the downside of needing to pre-define the language-translated-validators and know which one to reference in code. In my experience that's not how i18n typically works - at least not on my projects.

I'm trying to figure out a way to swap in a library like react-intl. The key characteristics here are:

  1. Messages are an object such as:

     const messages = defineMessages({
         isRequired: {
             id: "validation:isRequired",
             defaultMessage: "{field} is required",
             description: "Error message when required information is missing"
          }
     });
    
  2. You can get a locale-aware translation function that will apply the translation for the current locale. This function has to be used at time of validation to ensure the correct locale is referenced -- it can't be baked in when the validator is first defined.

     formatMessage(messages.isRequired, {field: "MyField"})
    

I'm having trouble thinking about how to tie these together. It's easy enough to set up a validator to use a message object, but I can't figure out where/how I'd pass in the formatMessage function:

const i18nIsRequired = isRequired.clone((field, {formatMessage}) => {
     // 1.  Not clear how formatMessage actually gets passed in here...
     // 2.   Translate the message
     return formatMessage(messages.isRequired, {field});
})

Any ideas or thoughts? Am I missing part of the API that would make this easier?

boxfoot avatar Jul 21 '17 03:07 boxfoot

Definitely needed, english-only messages are not good. :/

One simple approach could be to overrides the default messages when calling combineValidators, which seems to be the most common use-case of using this library. @boxfoot @jfairbank

const locales = {
isRequired: 'Obligatoire',
isAlphabetic: (field, value) => `"${value}" est incorrect`
};

const dogValidator = combineValidators({
  name: composeValidators(
    isRequired,
    isAlphabetic
  )('Name'),

  age: isNumeric('Age')
}, { locales: locales ); // Give locales as additional options

This is assuming there is only one error message per validator. If that's not the case (several possible errors) it would be a bit harder but still doable.

Vadorequest avatar Oct 23 '17 09:10 Vadorequest

@Vadorequest @boxfoot You could give this library a try: https://github.com/madcat23/simple-object-validation It has a standard mechanism for translated error messages and the syntax is quite similar to revalidate.

madcat23 avatar Oct 26 '17 20:10 madcat23