use "label" for validation error messages when avaliable, make sure they are translated properly

[bjoernklose]

Hey there, thanks for your great plugin, happily using it on a project currently. Only when also integrating i18n, there was a small issue that needed fixing.

• issue: when using the localize feature of vee-validate the {field} text was displayed without being replaced.
• solution: this seemed due to a mixup in validateMessage assignment
• extension: finally, most field names are usually cryptic and not user-friendly, so i also added a logic for using the "label" instead of the "prop" value in case it is defined
• result: instead of "companyName" is a required field, we will get to see "Your Company's Name" is a required field

Feel free to only use this as inspiration, as there are no proper tests etc. attached to this. Also, this is based on me playing around with the compiles .esm.js Version that is used in our project.

One final though / wish while we're at it: Do you plan on doing versioned releases soon? If so, something like release-it might help make things easier for you.

Thanks

[davestewart]

My first official user! 😝 (apart from me)

Yes, still some work to do around replacing the field message, I might ask for more information from you if that's OK. Are you saying that you basically want to use the label field as the i18n value?

Regarding the validateMessage assignment, errorField and errorForm are designed to read slightly differently:

• errorField - replace {field} placeholder with the more generic "This field..." for use inside the item
• errorForm - replace `{field} with the name (or in your case, label) of the field for use outside the item

I would like to add more customisation around this, maybe by way of a default function or other options.

Do you have any thoughts on this mechanism in general? I don't have any real foreign language experience - would this work for languages other than English? I should probably look again at the Vee Validate i18n files:

• https://github.com/baianat/vee-validate/tree/master/locale

Localisation was the next planned demo anyway, so perfect timing. In fact, do you have a demo i18n setup you could upload as a repo, or even sample code to post?

Also, thanks for the tip on Release It - that looks really useful.

[davestewart]

So I like the way you've used label to replace the field value, I think that works really well! Except... where there is no label, for example the Date and Time fields in the complex demo.

Ideally we need a way to derive this.

Thoughts:

• pass in a hash of fields with all labels; this could be used in the parent as well
• check for a data-label="" attribute on the FormItem
• finally, use this.$children[0].placeholder as a last-ditch attempt to get a value
• something else?

[davestewart]

FYI, I've raised an issue for the the/this field thing here:

• https://github.com/baianat/vee-validate/issues/1644

[Artem-Schander]

Hello There .. it would be nice if this could be merged :)

[davestewart]

Sorry - I moved projects ages ago so this has all slipped in my priorities!

I need to look at everything again as I know Vee Validate has moved on since I looked at this last.