Vue: Custom validation message for props

[b4dnewz]

What problem does this feature solve?

Let the developer (specially when using third party components/plugins) understand __why__ the error happen, in a more detailed, customizable and friendly way. Where the error came from is already known thanks to the code line dump (as in below example).

---

When validating a component property you have to return true or false in order to fulfill the validation, if it fails the console error looks like:

"[Vue warn]: Invalid prop: custom validator check failed for prop "example"."
found in

---> <WordCount> at src/components/WordCount/WordCount.vue
       <App> at src/App.vue
         <Root>

I think is a very generic warning and also the line dump where the error came from, is very useful but a custom error message could be more useful, in my opinion.

Obviously since the validation function is custom and it may vary for every prop, is very difficult to predict or deduct which warning message to display based on the code, so let the developer do it if possible.

---

Mine proposal is to add a "message" or "whatever" field to the prop object properties, which can be used a validator function is called against the prop input and it fails, if no "message" property is provided than the generic warning will show up instead.

Documentation about component props.
https://vuejs.org/v2/guide/components.html#Prop-Validation

Validation requirements object:

{
 type: String,
 required: true,
 default: '',
 validator: (value) => /^[a-zA-Z]+$/.test(value),
 message: 'You can use only letters'   <-------------- new validation error message property
}

Another use-case example:

A component property must be a 4 digit string and the validation function is:

function(value) {
 return value.length === 4
}

The "message" property in this case would be "You must enter a 4 digit number", so if the developer use the component like this:

<my-comp example="123"></my-comp>

The custom warning message shows up and the developer knows immediately which is the issue, this obviously work if the custom component developer used the "message" property to set a custom validation error message.

What does the proposed API look like?

When a custom validation function is used and it fails, the custom property validation message shows up as warning to show to the developer what is wrong.

props: {
    code: {
      type: String,
      validator(value) {
        return value.length === 4
      },
      message: 'You must enter a 4 digit number'
    }
}

What do you think about that?

I hope I didn't make a mess explaining this and is clear, if any doubt I will provide more details and use case example.

Many thanks in advance and many thanks for building Vue that is __simply awesome__.

[LinusBorg]

what is wrong with just using the console.warn / console.error?

[b4dnewz]

You mean like this?

validator(value) {
   if( value.length !== 4 ) {
     console.warn('You must enter a 4 digit number')
     return false
   }
   return true
},

I didn't think about it, I guess it could be a solution.

But I can see two eventual problems, first most of the times vue comes with eslinting (like in vue init) and console messages are usually disabled, second this console message will be added to the existing one which will always output a generic error and it can cause confusion, compared to a message like this (as per the example above):

"[Vue warn]: Invalid prop: You must enter a 4 digit number for prop "example"."
found in

---> <WordCount> at src/components/WordCount/WordCount.vue
       <App> at src/App.vue
         <Root>

where the pattern may be (or something similar):

"[Vue warn]: Invalid prop: <message> for prop "<prop>"."
found in

---> <WordCount> at src/components/WordCount/WordCount.vue
       <App> at src/App.vue
         <Root>

if the developer wants to use a custom message it will be displayed, otherwise the default message custom validator check failed for is displayed like always, this was basically my idea.

[HerringtonDarkholme]

Note validator and warn is called synchronously. So when you call console.error in validator, it is immediately before Vue's builtin warning.

This warning is good enough for me.

[b4dnewz]

@HerringtonDarkholme good point

[bitmage]

The built in message would be far more useful if it told me what the prop value was that was passed in. That's obvious information to include IMO, and would fulfill probably 80% of people's need to have a custom message as indicated here.

[LittaPanda]

More than a console message, maybe a mechanism to handle the error would be useful for this case.
Some attribute in prop that can callback if validation returns an error.
Just my two cents.
Regards!