Show validation errors when calling validate() method

[IonicaBizau]

How can I show validation errors for inputs when calling validate() method?

---

I tried using editor.trigger("change") and set show_errors: "change", but it doesn't work.

[mazswojejzony]

Interesting - I was just going to ask the same question. :-)

I like the default show_erros behavior. I just need to trigger validation when user tries to save changes and highlight properties which are not valid.

UPDATE:
I am able to force required behavior as follows:

var errors = editor.validate();
var tmp = editor.options.show_errors;
editor.root.showValidationErrors(errors);
editor.options.show_errors = tmp;

However I do not like this code at all. Is there a better way to do this?

[jdorn]

This code should work:

form.onsubmit = function() {
  editor.options.show_errors = "always";

  // Fire a change event to force revalidation
  editor.onChange();
};

Basically, once a user does an action (like hits the submit button), you want to show all errors regardless of the field's interaction state. In other words, you want the behavior of show_errors: "always". Most options can't be changed after initialization, but show_errors is an exception and can be changed at any time. The editor.onChange() line is a little hacky, but not too bad. It tricks JSONEditor into thinking a field has changed and forces revalidation.

[mazswojejzony]

This is a code smell to me. :-) What if I do not have a form? What if onChange() behavior changes in the future? Also this solution fiddles with the show_errors option.

I believe it should be fairly simple to add a new method to the editor class, e.g. showValidationErrors(errors) (note: this method would be available in the editor class prototype, not through the root property as it is now) which would do the work without any impact on show_errors.

This way we could use the default interaction setting for show_errors but validate and show errors (if any) when user submits changes.

[jdorn]

I disagree. You want the show_errors behavior to change after some arbitrary user action (form submit, click a "validate" button, etc.). At first, you only want to show errors when a user interacts with an input (show_errors: "interaction"). Then, you want to show all errors (show_errors: "always"). It just complicates things to add another showValidationErrors method that bypasses the options and duplicates the functionality.

I get your point about relying on the undocumented onChange method. It might be worth adding a setOption method to JSONEditor that takes care of the onChange stuff for you.

// Would change the option and call `onChange`
editor.setOption('show_errors', 'always');

[mazswojejzony]

To me show_errors controls automatic validation and errors visualization.
validate() method makes on demand, application triggered validation possible (but without errors visualization).

What is missing is the on demand, application triggered validation and errors visualization.

I believe this is a typical workflow (@IonicaBizau please comment if this is more or less the same in your case):

1. User navigates to the configuration screen.
2. Several options are shown using JSON Editor, including editor for array of objects.
3. User adds additional (say third) object to the array by clicking "Add Item" button.
4. JSON Editor shows third object properties with default values set as expected. One field is empty (there is no default value) however according to the schema this one field cannot be empty to validate the JSON value.
5. User clicks "Save" button.

After step no.5 application has to trigger validation and show which field values are missing or incorrect.

This is what is missing right now and I still believe adding a new method for this purpose should not really complicate anything. Changing options to achieve this effect is a not the best solution in my opinion. It may be the way to implement the new method but I think it should be hidden from JSON Editor clients.

[jdorn]

I added a setOption method. I don't think I want to add a showErrors method at this time, but it should be easy enough to add yourself:

JSONEditor.prototype.showErrors = function() {
  this.setOption('show_errors','always');
}
JSONEditor.prototype.hideErrors = function() {
  this.setOption('show_errors','never');
}

[IonicaBizau]

Great! 😄 Thanks!

[mazswojejzony]

Looks good, thanks!