Add option for when to show validation errors. Changed default behavi…

…or to be on interaction. Fixes #194
jdorn · Jul 24, 2014 · 7460578 · 7460578
1 parent f46ed33
commit 7460578
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -140,6 +140,11 @@ Here are all the available options:
     <td>A valid JSON Schema to use for the editor.  Version 3 and Version 4 of the draft specification are supported.</td>
     <td><code>{}</code></td>
   </tr>
+  <tr>
+    <td>show_errors</td>
+    <td>When to show validation errors in the UI.  Valid values are <code>interaction</code>, <code>change</code>, <code>always</code>, and <code>never</code>.</td>
+    <td><code>"interaction"</code></td>
+  </tr>
   <tr>
     <td>startval</td>
     <td>Seed the editor with an initial value.  This should be valid against the editor's schema.</td>

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "json-editor",
-  "version": "0.6.19",
+  "version": "0.7.1",
   "authors": [
     "Jeremy Dorn <[email protected]>"
   ],

diff --git a/demo.html b/demo.html
@@ -65,6 +65,15 @@ <h2>Options</h2>
                         <option value='grid'>grid</option>
                     </select>
                 </div>
+                <div>
+                    <label>Show Errors</label>
+                    <select id='show_errors' class='form-control'>
+                        <option value='interaction'>On Interaction</option>
+                        <option value='change'>On Field Change</option>
+                        <option value='always'>Always</option>
+                        <option value='never'>Never</option>
+                    </select>
+                </div>
                 <div>
                     <label>Boolean options</label>
                     <select multiple size=9 id='boolean_options' style='width: 100%;' class='form-control'>
@@ -258,7 +267,8 @@ <h2>Code</h2>
     };
 
     var reload = function(keep_value) {
-        var startval = (jsoneditor && keep_value)? jsoneditor.getValue() : undefined;
+        var startval = (jsoneditor && keep_value)? jsoneditor.getValue() : window.startval;
+        window.startval = undefined;
 
         if(jsoneditor) jsoneditor.destroy();
         jsoneditor = new JSONEditor($editor,{
@@ -372,25 +382,39 @@ <h2>Code</h2>
        JSONEditor.defaults.options.object_layout = this.value;
         reload(true);
     });
+    document.getElementById('show_errors').addEventListener('change',function() {
+       JSONEditor.defaults.options.show_errors = this.value;
+        reload(true);
+    });
     document.getElementById('boolean_options').addEventListener('change',function() {
         refreshBooleanOptions();
     });
-
+
+    // Get starting value from url
+    if(window.location.href.match('[?&]value=([^&]+)')) {
+      window.startval = JSON.parse(LZString.decompressFromBase64(window.location.href.match('[?&]value=([^&]+)')[1]));
+    }
+
     // Set options from direct link
     setTheme((window.location.href.match(/[?&]theme=([^&]+)/)||[])[1] || 'bootstrap2', true);
+
     setIconlib((window.location.href.match(/[?&]iconlib=([^&]*)/)||[null,'fontawesome4'])[1], true);
+
     document.getElementById('object_layout').value = (window.location.href.match(/[?&]object_layout=([^&]+)/)||[])[1] || 'normal';
+    JSONEditor.defaults.options.object_layout = document.getElementById('object_layout').value;
+
+    document.getElementById('show_errors').value = (window.location.href.match(/[?&]show_errors=([^&]+)/)||[])[1] || 'interaction';
+    JSONEditor.defaults.options.show_errors = document.getElementById('show_errors').value;
+
     var boolean_options = document.getElementById('boolean_options').children;
     for(var i=0; i<boolean_options.length; i++) {
         if(window.location.href.match(new RegExp('[?&]'+boolean_options[i].getAttribute('value')+'([&=]|$)'))) {
             boolean_options[i].selected = true;
         }
     }
     refreshBooleanOptions(true);
+
     reload();
-    if(window.location.href.match('[?&]value=([^&]+)')) {
-        jsoneditor.setValue(JSON.parse(LZString.decompressFromBase64(window.location.href.match('[?&]value=([^&]+)')[1])));
-    }
 })();
 </script>
 </body>

diff --git a/dist/jsoneditor.js b/dist/jsoneditor.js
@@ -1,8 +1,8 @@
-/*! JSON Editor v0.7.0 - JSON Schema -> HTML Editor
+/*! JSON Editor v0.7.1 - JSON Schema -> HTML Editor
  * By Jeremy Dorn - https://github.com/jdorn/json-editor/
  * Released under the MIT license
  *
- * Date: 2014-07-13
+ * Date: 2014-07-24
  */
 
 /**
@@ -370,7 +370,10 @@ JSONEditor.prototype = {
 
       // Validate and cache results
       self.validation_results = self.validator.validate(self.root.getValue());
-      self.root.showValidationErrors(self.validation_results);
+
+      if(self.options.show_errors !== "never") {
+        self.root.showValidationErrors(self.validation_results);
+      }
 
       // Fire change event
       self.trigger('change');
@@ -1759,7 +1762,10 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
     var changed = from_template || this.getValue() !== value;
 
     this.refreshValue();
-
+
+    if(initial) this.is_dirty = false;
+    else if(this.jsoneditor.options.show_errors === "change") this.is_dirty = true;
+
     if(changed) {
       if(self.parent) self.parent.onChildEditorChange(self);
       else self.jsoneditor.onChange();
@@ -1977,6 +1983,8 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
         if(val !== sanitized) {
           this.value = sanitized;
         }
+
+        self.is_dirty = true;
 
         self.refreshValue();
         self.watch_listener();
@@ -2053,6 +2061,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
           // Set the value and update
           self.input.value = val.html();
           self.value = self.input.value;
+          self.is_dirty = true;
           if(self.parent) self.parent.onChildEditorChange(self);
           else self.jsoneditor.onChange();
           self.jsoneditor.notifyWatchers(self.path);
@@ -2077,6 +2086,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
           var val = self.epiceditor.exportFile();
           self.input.value = val;
           self.value = val;
+          self.is_dirty = true;
           if(self.parent) self.parent.onChildEditorChange(self);
           else self.jsoneditor.onChange();
           self.jsoneditor.notifyWatchers(self.path);
@@ -2111,6 +2121,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
           var val = self.ace_editor.getValue();
           self.input.value = val;
           self.refreshValue();
+          self.is_dirty = true;
           if(self.parent) self.parent.onChildEditorChange(self);
           else self.jsoneditor.onChange();
           self.jsoneditor.notifyWatchers(self.path);
@@ -2249,6 +2260,11 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
   },
   showValidationErrors: function(errors) {
     var self = this;
+
+    if(this.jsoneditor.options.show_errors === "always") {}
+    else if(!this.is_dirty) return;
+
+
 
     var messages = [];
     $each(errors,function(i,error) {
@@ -2430,11 +2446,12 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
         var row = this.theme.getGridRow();
         container.appendChild(row);
         for(j=0; j<rows[i].editors.length; j++) {
-          var editor = this.editors[rows[i].editors[j].key];
+          var key = rows[i].editors[j].key;
+          var editor = this.editors[key];
 
           if(editor.options.hidden) editor.container.style.display = 'none';
           else this.theme.setGridColumnSize(editor.container,rows[i].editors[j].width);
-
+          editor.container.className += ' container-' + key;
           row.appendChild(editor.container);
         }
       }
@@ -2449,7 +2466,7 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
 
         if(editor.options.hidden) editor.container.style.display = 'none';
         else self.theme.setGridColumnSize(editor.container,12);
-
+        editor.container.className += ' container-' + key;
         row.appendChild(editor.container);
       });
     }
@@ -2577,11 +2594,15 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
       this.editjson_textarea.style.width = '300px';
       this.editjson_textarea.style.display = 'block';
       this.editjson_save = this.getButton('Save','save','Save');
-      this.editjson_save.addEventListener('click',function() {
+      this.editjson_save.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         self.saveJSON();
       });
       this.editjson_cancel = this.getButton('Cancel','cancel','Cancel');
-      this.editjson_cancel.addEventListener('click',function() {
+      this.editjson_cancel.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         self.hideEditJSON();
       });
       this.editjson_holder.appendChild(this.editjson_textarea);
@@ -2603,7 +2624,9 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
       this.addproperty_input.style.width = '220px';
       this.addproperty_input.style.marginBottom = '0';
       this.addproperty_input.style.display = 'inline-block';
-      this.addproperty_add.addEventListener('click',function() {
+      this.addproperty_add.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         if(self.addproperty_input.value) {
           if(self.editors[self.addproperty_input.value]) {
             alert('there is already a property with that name');
@@ -2664,7 +2687,9 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
       this.collapsed = false;
       this.toggle_button = this.getButton('','collapse','Collapse');
       this.title_controls.appendChild(this.toggle_button);
-      this.toggle_button.addEventListener('click',function() {
+      this.toggle_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         if(self.collapsed) {
           self.editor_holder.style.display = '';
           self.collapsed = false;
@@ -2692,7 +2717,9 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
 
       // Edit JSON Button
       this.editjson_button = this.getButton('JSON','edit','Edit JSON');
-      this.editjson_button.addEventListener('click',function() {
+      this.editjson_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         self.toggleEditJSON();
       });
       this.editjson_controls.appendChild(this.editjson_button);
@@ -2708,7 +2735,9 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
 
       // Object Properties Button
       this.addproperty_button = this.getButton('Properties','edit','Object Properties');
-      this.addproperty_button.addEventListener('click',function() {
+      this.addproperty_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         self.toggleAddProperty();
       });
       this.addproperty_controls.appendChild(this.addproperty_button);
@@ -3558,7 +3587,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
       self.rows[i].delete_button = this.getButton(self.getItemTitle(),'delete','Delete '+self.getItemTitle());
       self.rows[i].delete_button.className += ' delete';
       self.rows[i].delete_button.setAttribute('data-i',i);
-      self.rows[i].delete_button.addEventListener('click',function() {
+      self.rows[i].delete_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         var i = this.getAttribute('data-i')*1;
 
         var value = self.getValue();
@@ -3598,7 +3629,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
       self.rows[i].moveup_button = this.getButton('','moveup','Move up');
       self.rows[i].moveup_button.className += ' moveup';
       self.rows[i].moveup_button.setAttribute('data-i',i);
-      self.rows[i].moveup_button.addEventListener('click',function() {
+      self.rows[i].moveup_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         var i = this.getAttribute('data-i')*1;
 
         if(i<=0) return;
@@ -3624,7 +3657,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
       self.rows[i].movedown_button = this.getButton('','movedown','Move down');
       self.rows[i].movedown_button.className += ' movedown';
       self.rows[i].movedown_button.setAttribute('data-i',i);
-      self.rows[i].movedown_button.addEventListener('click',function() {
+      self.rows[i].movedown_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         var i = this.getAttribute('data-i')*1;
 
         var rows = self.getValue();
@@ -3656,7 +3691,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
     this.title_controls.appendChild(this.toggle_button);
     var row_holder_display = self.row_holder.style.display;
     var controls_display = self.controls.style.display;
-    this.toggle_button.addEventListener('click',function() {
+    this.toggle_button.addEventListener('click',function(e) {
+      e.preventDefault();
+      e.stopPropagation();
       if(self.collapsed) {
         self.collapsed = false;
         if(self.panel) self.panel.style.display = '';
@@ -3691,7 +3728,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
     // Add "new row" and "delete last" buttons below editor
     this.add_row_button = this.getButton(this.getItemTitle(),'add','Add '+this.getItemTitle());
 
-    this.add_row_button.addEventListener('click',function() {
+    this.add_row_button.addEventListener('click',function(e) {
+      e.preventDefault();
+      e.stopPropagation();
       var i = self.rows.length;
       if(self.row_cache[i]) {
         self.rows[i] = self.row_cache[i];
@@ -3712,7 +3751,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
     self.controls.appendChild(this.add_row_button);
 
     this.delete_last_row_button = this.getButton('Last '+this.getItemTitle(),'delete','Delete Last '+this.getItemTitle());
-    this.delete_last_row_button.addEventListener('click',function() {
+    this.delete_last_row_button.addEventListener('click',function(e) {
+      e.preventDefault();
+      e.stopPropagation();
       var rows = self.getValue();
 
       var new_active_tab = null;
@@ -3730,7 +3771,9 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
     self.controls.appendChild(this.delete_last_row_button);
 
     this.remove_all_rows_button = this.getButton('All','delete','Delete All');
-    this.remove_all_rows_button.addEventListener('click',function() {
+    this.remove_all_rows_button.addEventListener('click',function(e) {
+      e.preventDefault();
+      e.stopPropagation();
       self.setValue([]);
       if(self.parent) self.parent.onChildEditorChange(self);
       else self.jsoneditor.onChange();
@@ -4121,7 +4164,9 @@ JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
       self.rows[i].delete_button = this.getButton('','delete','Delete');
       self.rows[i].delete_button.className += ' delete';
       self.rows[i].delete_button.setAttribute('data-i',i);
-      self.rows[i].delete_button.addEventListener('click',function() {
+      self.rows[i].delete_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         var i = this.getAttribute('data-i')*1;
 
         var value = self.getValue();
@@ -4144,7 +4189,9 @@ JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
       self.rows[i].moveup_button = this.getButton('','moveup','Move up');
       self.rows[i].moveup_button.className += ' moveup';
       self.rows[i].moveup_button.setAttribute('data-i',i);
-      self.rows[i].moveup_button.addEventListener('click',function() {
+      self.rows[i].moveup_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         var i = this.getAttribute('data-i')*1;
 
         if(i<=0) return;
@@ -4164,7 +4211,9 @@ JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
       self.rows[i].movedown_button = this.getButton('','movedown','Move down');
       self.rows[i].movedown_button.className += ' movedown';
       self.rows[i].movedown_button.setAttribute('data-i',i);
-      self.rows[i].movedown_button.addEventListener('click',function() {
+      self.rows[i].movedown_button.addEventListener('click',function(e) {
+        e.preventDefault();
+        e.stopPropagation();
         var i = this.getAttribute('data-i')*1;
         var rows = self.getValue();
         if(i>=rows.length-1) return;

diff --git a/dist/jsoneditor.min.js b/dist/jsoneditor.min.js
diff --git a/src/core.js b/src/core.js
@@ -176,7 +176,10 @@ JSONEditor.prototype = {
 
       // Validate and cache results
       self.validation_results = self.validator.validate(self.root.getValue());
-      self.root.showValidationErrors(self.validation_results);
+
+      if(self.options.show_errors !== "never") {
+        self.root.showValidationErrors(self.validation_results);
+      }
 
       // Fire change event
       self.trigger('change');