[dasc] Field validation UI

[auniverseaway]

As an author, I would like to know if my object, array, or simpleton is not valid.

Criteria of acceptance

1. Simpleton's show errors below the field.
2. Objects highlight red (soft red background?)
3. Objects have human-readable text stating the issue
4. Arrays highlight red (soft red background?)
5. Arrays have a human-readable text stating the issue
6. Uses existing FormModel validation function.
7. Any form with errors should have some kind of warning.

Out of scope

1. Showing any errors in the outline - I'm not convinced this is needed. We can revisit.

[kozmaadrian]

2. Objects highlight red (soft red background?)
3. Arrays highlight red (soft red background?)

I’m not sure what is meant by object and array highlighting. So far, we’ve only used highlighting on input fields. Could you please provide more context on how objects and arrays are supposed to be highlighted?

Regarding the validation highlights in the editor area:

In an earlier version of the concept, I used a red highlight on the input field along with a red error message. Recently, however, I reduced the overall use of red and kept only the error message in red.

Before:

After:

In my opinion, this was a great improvement. The editor feels much cleaner and less visually overwhelming, while still clearly indicating when an input has a validation issue.

---

6. Uses existing FormModel validation function.

Based on my experience, the currently used library, @cfworker/json-schema, is not the right choice for validating data against the schema.

One major drawback is the quality of its default error messages, which do not meet UX expectations. For example:

• "String is too short (0 < 1)."
• "Instance does not match any of ["cover","icon"]." <-- In cases where there are many possible values (e.g., 15 options), the message lists all of them, which results in poor UX.
• and similar issues in other validation scenarios.

I have not found a way to customize these error messages, which further limits its suitability.

As probably alternative, I would suggest using the AJV (or other), which I have also tested. It provides more flexibility and granular control over validation:

• ajv – Base validation (e.g., required fields, empty values)
• ajv-formats – Validates schema-defined formats (e.g., email)
• ajv-errors – Allows custom error messages defined at the schema level (TBD whether this is something we want to expose as a feature)

Overall, AJV (or perhaps other library) would give us more control over validation behavior and significantly improve the user experience around error handling.

[mhaack]

I’m not sure what is meant by object and array highlighting.

I think the idea is if there is one or more validation errors in an object the entire object gets highlighted with some soft background color.
This raise the question how this will buckle up for nested objects, and even will one field error in a sub object mark the main object/form as well.

Maybe lets split this and do the field validation UI first only.