Flag errors rather than rejecting edits

[joshkel]

Suggestion

While evaluating json-edit-react as a possible replacement for josdejong/jsoneditor, I noticed a difference in validation (error handling) philosophies: jsoneditor flags invalid fields (with error icons and tooltips showing the message), while json-edit-react rejects invalid values completely.

There are times when the first approach may be preferable: maybe there's no way to make an edit in a single step (for example, an object of "type": 1 prohibits a details field, while an object of "type": 2 requires it), or maybe an edit has complex implications elsewhere in the JSON object that the user would like to address one at a time.

I realize I could probably implement some of this myself (maybe via error handling that's completely separate from json-edit-react, maybe via custom components that know how to do their own validation and error flags), and it may not fit your direction for the project, so this may be more of an idea or discussion topic than a concrete request.

Use case

See above.

[CarlosNZ]

Are you talking about validation with JSON Schemas?

How you handle the validation is completely up to you -- you provide the onUpdate function(s), and can choose whether to allow the data through, or to modify/reject it.

Let me know if you'd like assistance with a specific case.

[joshkel]

Yes, validation with JSON Schemas or custom logic.

Maybe it would help if I explain more the approach I'm currently using with jsoneditor. It allows providing an onValidate handler, with an interface similar to the following:

export type JSONPath = Array<string | number>;

export interface ValidationError {
    path: JSONPath;
    message: string;
}

type ValidateHandler = (json: any) => ValidationError[] | Promise<ValidationError[]>;

Then it's able to use those path errors to show icons and tooltips for each problematic field, and it can show icons for parent objects and arrays indicating that there are problems somewhere within:

My impression from reading the json-edit-react docs is that getting similar functionality there (of rendering icons and tooltips for multiple nodes) would require a decent amount of custom node coding. Apologies if I'm missing something.

[CarlosNZ]

Okay, so as I understand it, the functionality we're currently lacking is to be able to show some kind of indicator when a value is invalid, is that right?

We currently have Custom Buttons which would work visually (I think), but they're not currently conditional. I do have an issue to address this, but I wasn't going to bother with it until someone asked for it.

So, if the custom buttons were conditional, I think you could do something like:

• keep a separate data structure containing which elements have invalid values (which you manage outside the component)
• write an onUpdate function to set the "invalid" state of the above data structure when values are entered
• add a custom button (actually just an icon, but don't make it clickable) that renders conditionally if the path is considered "invalid" in your validation data structure (which obviously would require me adding the condition function)

Does that sound like what you're after?

[joshkel]

That sounds like what I'm after, with one possible exception - edit buttons only show on hover, right? I'd want the notification icons to always be visible. (I ought to be able to adjust the CSS to address that.)

[CarlosNZ]

Yeah, that's true, perhaps custom buttons aren't the best way to go.

What you could do (and this would work now without any changes), is use a style function to dynamically change the display of the values. e.g. when they are "invalid" they could be displayed in red.

You could possibly even use the ::after pseudo-class to insert a warning emoji (⚠️) to display it like your example above, although I haven't tried this myself so might not work.

I might have a play around with this later today just to see what we can do.

[CarlosNZ]

Hey, @joshkel , I've had a little play and I can get it kind of what you're after:

https://codesandbox.io/p/devbox/json-edit-react-demo-forked-27cr7k?workspaceId=ws_WnssZ3DHwX7dk5S788GZBn

Basically, errors show up in bright red:

And when collapsed, the node summary shows an error indicator:

It's not exactly what you described, but it's pretty close.

Perhaps when I make V2 of this component, I'll explicitly set an "isValid" property on each node, which you can set in the Update functions.