From 337949e817611ccfc767b218947cf81a0b4ac8ab Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 12 Feb 2020 13:59:32 +0100 Subject: [PATCH] Detect and report input validation errors in hidden tab menus --- .../files/js/WoltLabSuite/Core/Ui/TabMenu.js | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js index 704b8b2c3c..628cf4e08a 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js @@ -7,7 +7,7 @@ * @module Ui/TabMenu (alias) * @module WoltLabSuite/Core/Ui/TabMenu */ -define(['Dictionary', 'EventHandler', 'Dom/ChangeListener', 'Dom/Util', 'Ui/CloseOverlay', 'Ui/Screen', './TabMenu/Simple'], function(Dictionary, EventHandler, DomChangeListener, DomUtil, UiCloseOverlay, UiScreen, SimpleTabMenu) { +define(['Dictionary', 'EventHandler', 'Dom/ChangeListener', 'Dom/Util', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/Scroll', './TabMenu/Simple'], function(Dictionary, EventHandler, DomChangeListener, DomUtil, UiCloseOverlay, UiScreen, UiScroll, SimpleTabMenu) { "use strict"; var _activeList = null; @@ -140,6 +140,41 @@ define(['Dictionary', 'EventHandler', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Clos timeout = window.setTimeout(callback, 10); }); }).bind(this)); + + // The validation of input fields, e.g. [required], yields strange results when + // the erroneous element is hidden inside a tab. The submit button will appear + // to not work and a warning is displayed on the console. We can work around this + // by manually checking if the input fields validate on submit and display the + // parent tab ourselves. + var form = container.closest('form'); + if (form !== null) { + var submitButton = elBySel('input[type="submit"]', form); + if (submitButton !== null) { + (function(container, submitButton) { + submitButton.addEventListener(WCF_CLICK_EVENT, function(event) { + if (!event.defaultPrevented) { + var element, elements = elBySelAll('input, select', container); + for (var i = 0, length = elements.length; i < length; i++) { + element = elements[i]; + if (!element.checkValidity()) { + event.preventDefault(); + + // Select the tab that contains the erroneous element. + var tabMenu = this.getTabMenu(element.closest('.tabMenuContainer').id); + tabMenu.select(elData(element.closest('.tabMenuContent'), 'name')); + + UiScroll.element(element, function() { + this.reportValidity(); + }.bind(element)); + + return; + } + } + } + }.bind(this)); + }).bind(this)(container, submitButton); + } + } } } }, -- 2.20.1