Show child component errors in the parent

[AnnaYuS]

The application that i'm working on has a lot of forms. The forms have datepickers. The datepicker field must be a date in dd.mm.yyyy format. It seems like a good idea to add validation rule into datepicker component and not bother with validating it on the form level (so that we don't have to stick the date validator into every form) But then on the form level we might have server validation, and ideally the frontend and backend validation errors should be merged into an array of strings.

I've been trying to get the child errors (input field) to show up in the parent component (form) with vee-validate but had no success. Is there a way to do that?
Here is the code example: https://codesandbox.io/s/veevalidate-custom-input-child-errors-in-parent-9d4gn?file=/src/components/AppPage.vue

If it's not intended to work like that what would be the best approach in this situation in your opinion?

ps VeeValidate is awesome ⭐ 👍

[logaretm]

Thanks for the kind words, I'm not entirely sure what you want to do here but will try to answer to the best of my understanding.

There are a few issues in your example:

You are calling useField inside the BaseInput component, yet also calling useField on the parent and binding it to the same input, this is redundant and you shouldn't use useField to create data models.

Another aspect of validation is you can either go field-level validation or form-level validation but you cannot mix them.

Personally, when I design fields like pickers I do this:

• Make the component always produce and accept dates in timestamp format. (can be any format)
• If the value entered by the user is not a valid date, then it would produce null which can be validated with required and other rules.
• It's not about validating the format because the component will always produce it given that the user has entered the data correctly, it's about making sure the user did in fact give you the date value or not.

To me, date pickers help the user enter the date correctly so there is no point in validating the format, maybe you can design the picker component in such a way that the user can either have a correct date or not at all which makes it much easier to reason with.

If you are trying to communicate the field errors to parent components that do not have a useForm or Form then you are out of luck, you kind of have to do it yourself. You do inject/provide here to pass refs around and have the input component set it for the parent but this is hacky. What is the use-case exactly here?

[AnnaYuS]

Thank you for clarifying and sharing your opinion 🙏
And apologies for a messy example, i'm still figuring things out.

I didn't want to use the datepicker in the example for simplicity sake, so i used BaseInput component to recreate what i'm trying to achieve, i.e. errors from validation rules in BaseInput merged with the form errors for the same field in the Home view. But i guess you're saying that there is no direct way to have validation rules for the same field in 2 places (inside BaseInput and in the form that is using it), so i'll have to update the design of the components since i'm not a fan of hacky solutions. Possibly it could be enough to use setErrors method to add server side errors for BaseInput on the form level, but the frontend validation rules could be set in BaseInput with useField, so i don't have to set any validation rules on the form level

The use case here is a datepicker component that can produce null value, it's not always a required field, i.e. backend accepts null as a valid input and saves an empty date field successfully. I think to make it more user friendly the user should get a hint of what should be the correct date, in my case the hint comes from the validation error. And there is server side validation that comes back when the form is submitted, for example "The start date cannot be earlier than end date", so this error message needs to be added to the datepicker errors.

I think you're right, validating the date format is not the best approach to provide some feedback to the user, it's more like a workaround. Perhaps a better approach would be using input masks or maybe change the validator logic

[logaretm]

you're saying that there is no direct way to have validation rules for the same field in 2 places

Yes, there isn't. you can either go field-level rules or form-level schemas but not both.

Possibly it could be enough to use setErrors method to add server side errors

A lot of users don't use any client side validation and use this method to set the errors form the server's response, so going with this or both (client side + server side) is very viable.

Perhaps a better approach would be using input masks

Yep input masks seem like a good solution here.

Good luck!