web: trying to fix lingering validity message

reset custom validity state when editing the input box

code/html/src/schedule.mjs

@@ -1,6 +1,6 @@
-import { showPanelByName } from './core.mjs';
 import { addFromTemplate, addFromTemplateWithSchema } from './template.mjs';
 import { addEnumerables, groupSettingsOnAddElem, variableListeners } from './settings.mjs';
+import { reportValidityForInputOrSelect } from './validate.mjs';
 
 /** @param {function(HTMLElement): void} callback */
 function withSchedules(callback) {
@@ -37,12 +37,7 @@ function onValidate(value) {
             (elem.querySelectorAll(`input[name=${key}]`));
 
         if (id < elems.length) {
-            showPanelByName("sch");
-
-            const target = elems[id];
-            target.focus();
-            target.setCustomValidity(message);
-            target.reportValidity();
+            reportValidityForInputOrSelect(elems[id], message);
         }
     });
 }

code/html/src/settings.mjs

@@ -11,7 +11,7 @@ import {
     listenAppConnected,
 } from './connection.mjs';
 
-import { validateForms } from './validate.mjs';
+import { validateForms, resetCustomValidity } from './validate.mjs';
 
 /**
  * @param {HTMLElement} elem
@@ -1308,6 +1308,8 @@ export function onElementChange(event) {
         return;
     }
 
+    resetCustomValidity(target);
+
     if (!checkAndSetElementChanged(target)) {
         return;
     }

code/html/src/validate.mjs

@@ -9,6 +9,8 @@ const DIFFERENT_PASSWORD = "Passwords are different!";
 const EMPTY_PASSWORD = "Password cannot be empty!";
 const INVALID_PASSWORD = "Invalid password!";
 
+const CUSTOM_VALIDITY = "customValidity";
+
 /**
  * @param {string} value
  * @returns {boolean}
@@ -36,7 +38,6 @@ export function validatePassword(value) {
  * @typedef {[HTMLInputElement, HTMLInputElement]} PasswordInputPair
  */
 
-
 /**
  * @param {import('./settings.mjs').InputOrSelect} elem
  * @param {function(HTMLElement): void} callback
@@ -52,14 +53,30 @@ function findPanel(elem, callback) {
 
 /**
  * @param {import('./settings.mjs').InputOrSelect} elem
+ * @param {string} message
  */
-function reportValidityForInputOrSelect(elem) {
+export function reportValidityForInputOrSelect(elem, message = "") {
     findPanel(elem, (panel) => {
         showPanel(panel);
+
+        if (message.length != 0) {
+            elem.setCustomValidity(message);
+            elem.dataset[CUSTOM_VALIDITY] = message;
+        }
+
+        elem.focus();
         elem.reportValidity();
     });
 }
 
+/**
+ * @param {import('./settings.mjs').InputOrSelect} elem
+ */
+export function resetCustomValidity(elem) {
+    delete elem.dataset[CUSTOM_VALIDITY];
+    elem.setCustomValidity("");
+}
+
 /**
  * @param {import('./settings.mjs').InputOrSelect} elem
  * @returns {boolean}