Show warning icon when value or field is invalid or duplicate

src/js/Node.js

@@ -268,7 +268,7 @@ Node.prototype.setError = function (error, child) {
  * Render the error
  */
 Node.prototype.updateError = function() {
-  var error = this.error;
+  var error = this.fieldError || this.valueError || this.error;
   var tdError = this.dom.tdError;
   if (error && this.dom && this.dom.tr) {
     util.addClassName(this.dom.tr, 'jsoneditor-validation-error');
@@ -379,7 +379,7 @@ Node.prototype.setField = function(field, fieldEditable) {
  */
 Node.prototype.getField = function() {
   if (this.field === undefined) {
-    this._getDomField(false);
+    this._getDomField(true);
   }
 
   return this.field;
@@ -1317,8 +1317,8 @@ Node.select = function(editableDiv) {
  */
 Node.prototype.blur = function() {
   // retrieve the actual field and value from the DOM.
-  this._getDomValue(false);
+  this._getDomValue();
-  this._getDomField(false);
+  this._getDomField(true);
 };
 
 /**
@@ -1541,11 +1541,11 @@ Node.prototype.deepEqual = function (json) {
 
 /**
  * Retrieve value from DOM
- * @param {boolean} [silent]  If true (default), no errors will be thrown in
- *                            case of invalid data
  * @private
  */
-Node.prototype._getDomValue = function(silent) {
+Node.prototype._getDomValue = function() {
+  this._clearValueError();
+
   if (this.dom.value && this.type != 'array' && this.type != 'object') {
     this.valueInnerText = util.getInnerText(this.dom.value);
   }
@@ -1567,11 +1567,50 @@ Node.prototype._getDomValue = function(silent) {
       }
     }
     catch (err) {
-      // keep the previous (valid) value
+      // keep the previous value
+      this._setValueError(translate('cannotParseValueError'));
     }
   }
 };
 
+/**
+ * Show a local error in case of invalid value
+ * @param {string} message
+ * @private
+ */
+Node.prototype._setValueError = function (message) {
+  this.valueError = {
+    message: message
+  };
+  this.updateError();
+}
+
+Node.prototype._clearValueError = function () {
+  if (this.valueError) {
+    this.valueError = null;
+    this.updateError();
+  }
+}
+
+/**
+ * Show a local error in case of invalid or duplicate field
+ * @param {string} message
+ * @private
+ */
+Node.prototype._setFieldError = function (message) {
+  this.fieldError = {
+    message: message
+  };
+  this.updateError();
+}
+
+Node.prototype._clearFieldError = function () {
+  if (this.fieldError) {
+    this.fieldError = null;
+    this.updateError();
+  }
+}
+
 /**
  * Handle a changed value
  * @private
@@ -1878,11 +1917,13 @@ Node.prototype._updateDomField = function () {
 
 /**
  * Retrieve field from DOM
- * @param {boolean} [silent]  If true (default), no errors will be thrown in
+ * @param {boolean} [forceUnique]  If true, the field name will be changed
- *                            case of invalid data
+ *                                 into a unique name in case it is a duplicate.
  * @private
  */
-Node.prototype._getDomField = function(silent) {
+Node.prototype._getDomField = function(forceUnique) {
+  this._clearFieldError();
+
   if (this.dom.field && this.fieldEditable) {
     this.fieldInnerText = util.getInnerText(this.dom.field);
   }
@@ -1900,16 +1941,25 @@ Node.prototype._getDomField = function(silent) {
           this._debouncedOnChangeField();
         }
         else {
-          if (!silent) {
+          if (forceUnique) {
             // fix duplicate field: change it into a unique name
-            this.field = util.findUniqueName(field, existingFieldNames);
+            field = util.findUniqueName(field, existingFieldNames);
-            this._debouncedOnChangeField();
+            if (field !== this.field) {
+              this.field = field;
+              // this._debouncedOnChangeField = util.debounce(this._onChangeField.bind(this), Node.prototype.DEBOUNCE_INTERVAL);
+              // this._onChangeField();
+              this._debouncedOnChangeField(); //FIXME: don't debounce but resolve right away, and cancel current debounce
+            }
+          }
+          else {
+            this._setFieldError(translate('duplicateFieldError'));
           }
         }
       }
     }
     catch (err) {
-      // keep the previous (valid) field value
+      // keep the previous field value
+      this._setFieldError(translate('cannotParseFieldError'));
     }
   }
 };
@@ -2412,6 +2462,7 @@ Node.prototype.setSelected = function (selected, isFirst) {
 Node.prototype.updateValue = function (value) {
   this.value = value;
   this.previousValue = value;
+  this.valueError = undefined;
   this.updateDom();
 };
 
@@ -2422,6 +2473,7 @@ Node.prototype.updateValue = function (value) {
 Node.prototype.updateField = function (field) {
   this.field = field;
   this.previousField = field;
+  this.fieldError = undefined;
   this.updateDom();
 };
 
@@ -2864,7 +2916,8 @@ Node.prototype.onEvent = function (event) {
     switch (type) {
       case 'blur':
       case 'change':
-        this._getDomValue(true);
+        this._getDomValue();
+        this._clearValueError();
         this._updateDomValue();
         if (this.value) {
           domValue.innerHTML = this._escapeHTML(this.value);
@@ -2873,7 +2926,7 @@ Node.prototype.onEvent = function (event) {
 
       case 'input':
         //this._debouncedGetDomValue(true); // TODO
-        this._getDomValue(true);
+        this._getDomValue();
         this._updateDomValue();
         break;
 
@@ -2895,14 +2948,14 @@ Node.prototype.onEvent = function (event) {
 
       case 'keyup':
         //this._debouncedGetDomValue(true); // TODO
-        this._getDomValue(true);
+        this._getDomValue();
         this._updateDomValue();
         break;
 
       case 'cut':
       case 'paste':
         setTimeout(function () {
-          node._getDomValue(true);
+          node._getDomValue();
           node._updateDomValue();
         }, 1);
         break;
@@ -2914,14 +2967,6 @@ Node.prototype.onEvent = function (event) {
   if (target == domField) {
     switch (type) {
       case 'blur':
-        this._getDomField(false);
-        this._updateDomField();
-        if (this.field) {
-          domField.innerHTML = this._escapeHTML(this.field);
-        }
-        break;
-
-      case 'change':
         this._getDomField(true);
         this._updateDomField();
         if (this.field) {
@@ -2930,7 +2975,7 @@ Node.prototype.onEvent = function (event) {
         break;
 
       case 'input':
-        this._getDomField(true);
+        this._getDomField();
         this._updateSchema();
         this._updateDomField();
         this._updateDomValue();
@@ -2942,14 +2987,14 @@ Node.prototype.onEvent = function (event) {
         break;
 
       case 'keyup':
-        this._getDomField(true);
+        this._getDomField();
         this._updateDomField();
         break;
 
       case 'cut':
       case 'paste':
         setTimeout(function () {
-          node._getDomField(true);
+          node._getDomField();
           node._updateDomField();
         }, 1);
         break;

src/js/i18n.js

@@ -22,6 +22,9 @@ var _defs = {
     duplicateText: 'Duplicate',
     duplicateTitle: 'Duplicate selected fields (Ctrl+D)',
     duplicateField: 'Duplicate this field (Ctrl+D)',
+    duplicateFieldError: 'Duplicate field name',
+    cannotParseFieldError: 'Cannot parse field into JSON',
+    cannotParseValueError: 'Cannot parse value into JSON',
     empty: 'empty',
     expandAll: 'Expand all fields',
     expandTitle: 'Click to expand/collapse this field (Ctrl+E). \n' +
@@ -106,6 +109,9 @@ var _defs = {
     duplicateText: '复制',
     duplicateTitle: '复制选中字段(Ctrl+D)',
     duplicateField: '复制该字段(Ctrl+D)',
+    duplicateFieldError: '重复的字段名称',
+    cannotParseFieldError: '无法将字段解析为JSON',
+    cannotParseValueError: '无法将值解析为JSON',
     empty: '清空',
     expandAll: '展开所有字段',
     expandTitle: '点击 展开/收缩 该字段(Ctrl+E). \n' +
@@ -190,6 +196,9 @@ var _defs = {
     duplicateText: 'Duplicar',
     duplicateTitle: 'Duplicar campos selecionados (Ctrl+D)',
     duplicateField: 'Duplicar este campo (Ctrl+D)',
+    duplicateFieldError: 'Nome do campo duplicado',
+    cannotParseFieldError: 'Não é possível analisar o campo no JSON',
+    cannotParseValueError: 'Não é possível analisar o valor em JSON',
     empty: 'vazio',
     expandAll: 'Expandir todos campos',
     expandTitle: 'Clique para expandir/encolher este campo (Ctrl+E). \n' +
@@ -286,6 +295,9 @@ var _defs = {
     duplicateText: 'Aşağıya kopyala',
     duplicateTitle: 'Seçili alanlardan bir daha oluştur (Ctrl+D)',
     duplicateField: 'Bu alandan bir daha oluştur (Ctrl+D)',
+    duplicateFieldError: 'Duplicate field name',
+    cannotParseFieldError: 'Alan JSON\'a ayrıştırılamıyor',
+    cannotParseValueError: 'JSON\'a değer ayrıştırılamıyor',
     empty: 'boş',
     expandAll: 'Tüm alanları aç',
     expandTitle: 'Bu alanı açmak/kapatmak için tıkla (Ctrl+E). \n' +