luci-base: show validation message in error

Signed-off-by: Lukas Voegl <lvoegl@tdt.de>

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))

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));
 	},
 

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;
 		}