Is it possible to allow custom field component validation to invalidate a form?

[asibilia]

I'm building a custom phone number field using react-phone-input-2 and using JSON schema to build my forms. The PhoneInput component has a built-in isValid property which you can use to set field level validation. I'm wondering if there's a way to propagate this value back to the form state so that I won't have to write custom validation logic in every JSON Schema property that uses my custom PhoneInput field.

Thanks in advance!

[radekmie]

Hi @asibilia. There's no easy way of doing so. You could hoist this error up above the form and add it to the current error using onValidate.

Separately, why wouldn't you extend your schema to include this validation as well? It's crucial not to rely on the UI when it comes to validation. And by using custom keywords it could be made quickly.

[asibilia]

Got it, thank you. The issue with including this validation in the schema is that it's quite complicated.

For example, determining whether a phone number's length is valid based on the country code selected... In the component itself I can have a simple function for this because I know which country code is selected, but in the form of a JSON schema this could get pretty messy. Not only that but I'd have to repeat it for every phone input my schema (our schemas are returned to us from a service).

I think I may have to go with your suggestion of hoisting the error above the form and injecting it with onValidate.

[radekmie]

About the complexity of validation - I know how hard it is to validate a phone number, and that's why I suggested a custom keyword - you can use any JavaScript code there.

[asibilia]

Yeah, that would work too though my component has access to the selected country separate from the rest of the phone number and a custom schema keyword would only have the full number (including country) which I'd then have to parse out.

In either case I may have components in the future where I'll have a similar issue (where there are pieces of a field value that are easier to validate before being returned as the whole value) and so setting up a way for components to communicate additional validation with the form context will probably be beneficial going forward.

Also for our use case we'll almost never have a phone field that we'd allow to submit an invalid phone format so it would get pretty redundant having to include a custom schema key on every phone input property.

[simplecommerce]

@asibilia I know this has been a while but how did you end up applying your validation logic?

[radekmie]

@simplecommerce I don't know how @asibilia did it, but we do actually have a custom keyword or a SimpleSchema validator for phone numbers. However, we do store them as a single string in the database, and use libphonenumber to split it in the UI into country code and the rest. (You can use it to denormalize them in the database as well.)