Mark field as invalid in built-in UI when custom validation from webhook failed

[YanaHoncharova]

Preflight checklist

• [X] I could not find a solution in the existing issues, docs, nor discussions.
• [X] I agree to follow this project's Code of Conduct.
• [X] I have read and am following this repository's Contribution Guidelines.
• [X] I have joined the Ory Community Slack.
• [ ] I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

https://strange-dhawan-7s0r5y1fu3.projects.oryapis.com

Describe your problem

We have set up a flow-interrupting webhook which returns 403 status code when our custom check for one of the registration fields fails. We return the payload as in this example: https://www.ory.sh/docs/guides/integrate-with-ory-cloud-through-webhooks#flow-interrupting-webhooks, but with “error” type.

As a result the error message is shown below the validated field (field is provided in our response as instance_ptr), but the field itself is shown as still valid (it is green instead of red).

Describe your ideal solution

Provide additional field in webhook error payload (like valid: false) and use it to set valid state of the input. Also field can be always considered invalid if a message with the "error" type is returned for it.

Workarounds or alternatives

Have not found any.

Version

Ory Network

Additional Context

https://ory-community.slack.com/archives/C02MR4DEEGH/p1698307141585029

Current behaviour:

[Benehiko]

This is because the CSS is only checking for the HTML to emit an error based on its internal validation rules or pattern matching rules.

https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation

We would need to override this when there is a message on the field of type error and re-render the field.

The CSS for this is here: https://github.com/ory/elements/blob/main/src/theme/input-field.css.ts#L12-L42

PRs are welcome! :)