Merge pull request #1593 from germanbisurgi/feature/editor-show-error-messages

germanbisurgi · web-flow · commit 57cdaf5d35b5 · 2024-07-18T15:37:29.000+02:00
Feature/editor show error messages
diff --git a/README.md b/README.md
@@ -409,6 +409,12 @@ const errors = editor.validate({
 });
 ```
 
+Display validation errors on demand
+
+```javascript
+editor.showValidationErrors();
+```
+
 ### Listen for Changes
 
 The `change` event is fired whenever the editor's value changes.
diff --git a/src/core.js b/src/core.js
@@ -411,6 +411,15 @@ export class JSONEditor {
     styleSheet.replaceSync(cssText)
     shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleSheet]
   }
+
+  showValidationErrors () {
+    const errors = this.validate()
+
+    Object.values(this.editors).forEach(editor => {
+      editor.is_dirty = true
+      editor.showValidationErrors(errors)
+    })
+  }
 }
 
 JSONEditor.defaults = defaults
diff --git a/tests/codeceptjs/core_test.js b/tests/codeceptjs/core_test.js
@@ -5,6 +5,18 @@ const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
+Scenario('should show all validation errors on demand @editor-show-validation-errors', async ({ I }) => {
+  I.amOnPage('editor-show-validation-errors.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('Value must be the constant value')
+  I.dontSee('Value must be at least 4 characters long')
+  I.dontSee('Value must be at least 4')
+  I.click('#show-validation-errors')
+  I.waitForText('Value must be the constant value')
+  I.waitForText('Value must be at least 4 characters long')
+  I.waitForText('Value must be at least 4')
+})
+
 Scenario('should enforce const @enforce_const', async ({ I }) => {
   I.amOnPage('enforce-const.html')
   I.waitForElement('.je-ready')
diff --git a/tests/pages/editor-show-validation-errors.html b/tests/pages/editor-show-validation-errors.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>showValidationErrors</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+    <div class="btn btn-success" id="show-validation-errors">Show validation errors</div>
+</div>
+
+<script>
+  const editorContainer = document.querySelector('#editor-container')
+  const schema = {
+    "type": "object",
+    "properties": {
+      "boolean-checkbox": {
+        "title": "boolean-checkbox",
+        "type": "boolean",
+        "format": "checkbox",
+        "const": true,
+        "default": false
+      },
+      "minLength": {
+        "type": "string",
+        "minLength": 4,
+      },
+      "minimum": {
+        "type": "number",
+        "minimum": 4,
+      }
+    }
+  }
+
+  const editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome'
+  })
+
+  const showValidationErrors = document.querySelector('#show-validation-errors')
+
+  showValidationErrors.addEventListener('click', () => {
+    editor.showValidationErrors()
+  })
+</script>
+
+</body>
+</html>
