Easy way to customize error message?

[CrisLi]

As the Joi doesn't support client side customizing the error message well. (We have to use option method and language key). Would you add a feature for our React user to customize the error message easily?

this.getValidationMessages(fieldName, [local]);

[jurassix]

@CrisLi you have some options currently. In the example below you can use the API to determine if the field is invalid and return a custom message.

Would something like this work for you?

getCustomMessage: function(fieldName) {
  var messages = {
    username: 'Username invalid',
    password: 'Password required'
  }
  return this.isValid(fieldName) ? null : messages[fieldName];
}

[CrisLi]

@jurassix That works for me. Thank you a lot.

If you can have a functionality, which can replace Joi default error message, that will be great. Then, we don't need to write any additional method, just use the label method to replace the label key. I know, my requirement sounds like a Joi's feature, but I found some discussion in their website, they focus on the back-end API, will only provide the error type and let server render the corresponding message.

[sdjustin]

What if one field could have different type of error messages. For example, password could show different messages for required, invalid message, etc. Right now, I'm overriding the language key in option method of Joi, but this isn't ideal since I have to conform to its structure(which can get 3 levels deep) and it's getting ugly because I have to do this for 5 fields.

Noticed in documentation:

errors = { field: [messages] }

That messages is an array. Is it somehow filtering through array for the correct message? How?

[sdjustin]

Doh, disregard above comment. I didn't see https://github.com/jurassix/react-validation-mixin/issues/26, which explains it for me.

[jurassix]

Added documentation for this. Joi fully supports custom messages.

Checkout the docs on Custom Messages and I18N

[CrisLi]

@jurassix that is good

[hon]

@jurassix, I did as the document said:

this.validatorTypes = {
      register_name: Joi.string().alphanum().min(3).max(30).required().label('register_name'),
      register_tel: Joi.string().regex(this.mobilePattern).label('register_tel').options({
        language: {
          any: {
            required: '{{key}} custom required message.',
          },
          string: {
            base: '{{key}} custom string message.',
            email: '{{key}} custom email message.',
          }
        }
      })
    }

but it the error messages didn't change:

{
  "register_name": [
    "\"register_name\" is not allowed to be empty",
    "\"register_name\" must only contain alpha-numeric characters",
    "\"register_name\" length must be at least 3 characters long"
  ],
  "register_tel": [
    "\"register_tel\" is not allowed to be empty",
    "\"register_tel\" with value \"\" fails to match the required pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/"
  ]
}

some thing is wrong?

[jurassix]

You need to match the language keys to the errors you want to override.

Bellow I've updated the language definition for register_tel. This should help you fill in the rest of the details.

this.validatorTypes = {
      register_name: Joi.string().alphanum().min(3).max(30).required().label('register_name'),
      register_tel: Joi.string().regex(this.mobilePattern).label('register_tel').options({
        language: {
          any: {
            empty: 'is not allowed to be empty',
          },
          string: {
            regex: {
              base: 'with value "{{!value}}" fails to match the required pattern: {{pattern}}',
              name: 'with value "{{!value}}" fails to match the {{name}} pattern'
            },
          }
      })
    }

[hon]

ok, I see, 谢谢！