Implement an onValidation callback

[fredrikbergqvist]

I may be understanding the functionality of the onError callback function, but I would assume that it would be triggered on a JSON error.

This does not seem to work today, at least not when using it in React.

I've replicated it here in a fork of the React example: https://codesandbox.io/s/svelte-jsoneditor-react-forked-3ohvvk

[josdejong]

Thanks for your question. The onError callback triggers when a user action resulted in an error.

In your codesandbox, you can produce an error by:

• switch to code mode
• type some random characters such that the JSON document becomes invalid (having a red parse error)
• click one of the buttons Format/Compact/Sort/Transform in the main menu, this will trigger your onError callback

Are there cases where you would expect an error which is not fired?

[fredrikbergqvist]

Thank you for the clarification, it was obviously a misunderstanding on my part.

I expected the onError callback to be run when a JSON error occurred like in the image

Is there a way to be alerted when that happens?

[josdejong]

Ah, that is an interesting idea. It would not be the onError: in the application, a parse error is just a "validation error", similar to validation warnings when you have configured a JSON schema. It would be neat to implement an onValidation callback, which passes the validation warnings and errors and allow you to intercept them. I'll change the title of this issue accordingly, ok?

[loliconer]

Thinking this scenario:
I just want to store a valid JSON document to the database, but currently when the onChange handler is fired, we don't know if the content is valid.
So I think we can add a flag in the props, like preventInvalidJson. If preventInvalidJson is true, then onChange will only be fired when the JSON document is valid.
What's your thoughts? @fredrikbergqvist @josdejong

[fredrikbergqvist]

@loliconer That pretty much is my scenario and would work well for me.

Another approach would be to pass along isValid with the onChange callback response

[josdejong]

That is an interesting idea.

Instead of passing an extra parameter isValid: boolean, the editor could instead pass the list with validation issues (if any). So if there are no issues, an empty array would be passed, and otherwise, you have list with a meaningful error messages that can be displayed to the user.

An other idea would be to expose a .validate() method, so you could simply collect the issues yourself. This would allow to check whether the contents are valid at any moment you want, like when the user presses a "Save" button or so.

function onSave() {
  const content = editor.get()
  const issues = editor.validate()
  const isValid = issues.length === 0
  // ... 
}

Would that make sense?

EDIT: that would be a non-declarative solution though, requiring a reference to the editor

[loliconer]

@josdejong I prefer the first solution, as Save button is not necessary in some cases.

[fredrikbergqvist]

Instead of passing an extra parameter isValid: boolean, the editor could instead pass the list with validation issues (if any). So if there are no issues, an empty array would be passed, and otherwise, you have list with a meaningful error messages that can be displayed to the user.

I agree that a list makes a lot more sense than isValid: boolean.
Would be a good solution I think.

[josdejong]

Let's go for the following solution, giving all flexibility you may ever need:

• give onChange an additional parameter validationErrors (containing both parse errors and warnings)
• expose the internal editor.validate() method, returning validationErrors

[josdejong]

Available now in v0.6.0: a method editor.validate(), and the third argument of the onChange callback is now an object holding contentErrors and patchResult (instead of patchResult as third argument).

[VitorTS]

@josdejong It seems there's no way to replace the default error handling behaviour with a custom on? This feature gives me the errors but the error box is still shown.

[josdejong]

@VitorTS I'm not sure what you mean. There is an onError callback that you can use to do something when an error occurs.