Show warning icon when value or field is invalid or duplicate

This commit is contained in:
jos 2019-03-30 20:58:43 +01:00
parent 19a625fa6e
commit 12d908d08a
2 changed files with 95 additions and 38 deletions

View File

@ -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._getDomField(false);
this._getDomValue();
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
* case of invalid data
* @param {boolean} [forceUnique] If true, the field name will be changed
* 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);
this._debouncedOnChangeField();
field = util.findUniqueName(field, existingFieldNames);
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;

View File

@ -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' +