Allow for fields to share their own validation state with the form context

[kerunix]

Is your feature request related to a problem? Please describe.

I'm currently trying to make vue-tel-input@next work with vee-validate in a form validated through a Zod schema and I'm facing an issue since I want the final value in the form to be a string, and let my PhoneInput.vue component handle its own validation with useField and some internal bindings to the vue-tel-input events. But I found out that unless I mark the useField as standalone, the rules I defined in the field are not applied, in fact the validation function I gave to useField won't even trigger.

This means that in order to validate an international phone number I would have to make the field's value the whole phoneObject of vue-tel-input, give that whole value to the form, pass it to zod and implement a custom validation that relies on libphonenumberjs, and only then get my phone number from that object before submitting my form since this is all the API I'm using expects. All of these things are already done internally by vue-tel-input (except for the submitting of course), and I'd really like for my field to do it's own validation without being referenced in the form's schema, but still mark the whole form as invalid if the validation was to fail.

Describe the solution you'd like

Basically make it so that a field that's living in a form context, but not in that form's validation schema, can still inform said form about its own validity state.

[logaretm]

This came up before, but mixing field and form validation levels are not something I like to support or encourage since it means:

• We need to handle merging the field rules with the validation schema, what if a field uses yup and form uses zod?
• How would you as a developer be able to tell which validation level originated that error when debugging?

I could workaround the first issue by running the field validation and merging the result instead. The second issue, well requires more work than It is worth at the moment, but is is something I'm considering working on in general.

An alternative approach is only propagate the useField value when it is valid. So take the valid output of vue-tel-input and then call handleChange or set the value of useField. Otherwise it stays null or undefined and you don't have to replicate it.

To me this is similar to a date input, what is the point of validating the value is a date when the input propagates valid date values only. i.e: it is the job of the component to emit valid values.

[joezimjs]

@logaretm Wouldn't you just be able to modify this function?: https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/src/useField.ts#L171-L186

Instead of just returning the result of the form validation, just keep its results, do the field validation, and combine results... You may also prefer to swap the order and let the field's validation happen first.

I'm not terribly familiar with the code base, so I could easily be missing some things, but that seemed to make sense to me.

[stephsavoie]

• How would you as a developer be able to tell which validation level originated that error when debugging?

When field rules are defined both globally (using useForm) and locally (using useField), I'd assume that only local rules would be executed.