From 735d949bfc3168751567f3c991c8d5c845559f23 Mon Sep 17 00:00:00 2001 From: Lukas Voegl Date: Wed, 13 Oct 2021 12:20:48 +0200 Subject: [PATCH] luci-base: show validation message in error Signed-off-by: Lukas Voegl --- .../htdocs/luci-static/resources/form.js | 24 ++++++++++++++++--- .../htdocs/luci-static/resources/ui.js | 14 +++++++++++ .../luci-static/resources/validation.js | 17 ++++++++++--- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 4016007742..cf09a1da90 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -601,7 +601,7 @@ var CBIMap = CBIAbstractElement.extend(/** @lends LuCI.form.Map.prototype */ { if (!silent) { ui.showModal(_('Save error'), [ E('p', {}, [ _('An error occurred while saving the form:') ]), - E('p', {}, [ E('em', { 'style': 'white-space:pre' }, [ e.message ]) ]), + E('p', {}, [ E('em', { 'style': 'white-space:pre-wrap' }, [ e.message ]) ]), E('div', { 'class': 'right' }, [ E('button', { 'class': 'cbi-button', 'click': ui.hideModal }, [ _('Dismiss') ]) ]) @@ -1910,6 +1910,20 @@ var CBIAbstractValue = CBIAbstractElement.extend(/** @lends LuCI.form.AbstractVa return elem ? elem.isValid() : true; }, + /** + * Returns the current validation error for this input. + * + * @param {string} section_id + * The configuration section ID + * + * @returns {string} + * The validation error at this time + */ + getValidationError: function (section_id) { + var elem = this.getUIElement(section_id); + return elem ? elem.getValidationError() : ''; + }, + /** * Test whether the option element is currently active. * @@ -1971,7 +1985,9 @@ var CBIAbstractValue = CBIAbstractElement.extend(/** @lends LuCI.form.AbstractVa if (active && !this.isValid(section_id)) { var title = this.stripTags(this.title).trim(); - return Promise.reject(new TypeError(_('Option "%s" contains an invalid input value.').format(title || this.option))); + var error = this.getValidationError(section_id); + return Promise.reject(new TypeError( + _('Option "%s" contains an invalid input value.').format(title || this.option) + ' ' + error)); } if (fval != '' && fval != null) { @@ -3877,7 +3893,9 @@ var CBIFlagValue = CBIValue.extend(/** @lends LuCI.form.FlagValue.prototype */ { if (!this.isValid(section_id)) { var title = this.stripTags(this.title).trim(); - return Promise.reject(new TypeError(_('Option "%s" contains an invalid input value.').format(title || this.option))); + var error = this.getValidationError(section_id); + return Promise.reject(new TypeError( + _('Option "%s" contains an invalid input value.').format(title || this.option) + ' ' + error)); } if (fval == this.default && (this.optional || this.rmempty)) diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index 9cc62c12db..9f3e74b935 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -155,6 +155,18 @@ var UIElement = baseclass.extend(/** @lends LuCI.ui.AbstractElement.prototype */ return (this.validState !== false); }, + /** + * Returns the current validation error + * + * @instance + * @memberof LuCI.ui.AbstractElement + * @returns {string} + * The validation error at this time + */ + getValidationError: function() { + return this.validationError || ''; + }, + /** * Force validation of the current input value. * @@ -243,10 +255,12 @@ var UIElement = baseclass.extend(/** @lends LuCI.ui.AbstractElement.prototype */ this.node.addEventListener('validation-success', L.bind(function(ev) { this.validState = true; + this.validationError = ''; }, this)); this.node.addEventListener('validation-failure', L.bind(function(ev) { this.validState = false; + this.validationError = ev.detail.message; }, this)); }, diff --git a/modules/luci-base/htdocs/luci-static/resources/validation.js b/modules/luci-base/htdocs/luci-static/resources/validation.js index 70d3a7e73a..ce5c1ed540 100644 --- a/modules/luci-base/htdocs/luci-static/resources/validation.js +++ b/modules/luci-base/htdocs/luci-static/resources/validation.js @@ -61,9 +61,15 @@ var Validator = baseclass.extend({ valid = this.vstack[0].apply(this, this.vstack[1]); if (valid !== true) { - this.field.setAttribute('data-tooltip', _('Expecting: %s').format(this.error)); + var message = _('Expecting: %s').format(this.error); + this.field.setAttribute('data-tooltip', message); this.field.setAttribute('data-tooltip-style', 'error'); - this.field.dispatchEvent(new CustomEvent('validation-failure', { bubbles: true })); + this.field.dispatchEvent(new CustomEvent('validation-failure', { + bubbles: true, + detail: { + message: message + } + })); return false; } @@ -74,7 +80,12 @@ var Validator = baseclass.extend({ this.assert(false, valid); this.field.setAttribute('data-tooltip', valid); this.field.setAttribute('data-tooltip-style', 'error'); - this.field.dispatchEvent(new CustomEvent('validation-failure', { bubbles: true })); + this.field.dispatchEvent(new CustomEvent('validation-failure', { + bubbles: true, + detail: { + message: valid + } + })); return false; } -- 2.30.2