@kerkhoff-ict/solora 2.5.1 → 2.5.2

package/dist/index.js

@@ -1919,41 +1919,58 @@ function initDropdowns() {
 }
 
 // src/components/input.js
-function initInput(inputElement) {
-  if (!inputElement) return;
-  let errorDisplay = inputElement.parentNode.querySelector(".sol-error-message");
-  if (!errorDisplay) {
-    errorDisplay = document.createElement("span");
-    errorDisplay.className = "sol-error-message";
-    inputElement.parentNode.appendChild(errorDisplay);
-  }
-  inputElement.addEventListener("invalid", (e) => {
-    e.preventDefault();
-    showError();
-  });
-  inputElement.addEventListener("input", () => {
-    if (inputElement.validity.valid) {
-      hideError();
+function initInput() {
+  const inputs = document.querySelectorAll(".sol-input");
+  inputs.forEach((input) => {
+    const form = input.closest("form");
+    if (form && !form.noValidate) {
+      form.noValidate = true;
     }
-  });
-  function showError() {
-    let message = "Ongeldige invoer";
-    if (inputElement.validity.valueMissing) {
-      message = "Dit veld is verplicht";
-    } else if (inputElement.validity.typeMismatch) {
-      if (inputElement.type === "email") message = "Voer een geldig e-mailadres in";
-      if (inputElement.type === "url") message = "Voer een geldige link in";
-    } else if (inputElement.validity.rangeUnderflow) {
-      message = `Minimum is ${inputElement.min}`;
+    let errorDisplay = input.parentNode.querySelector(".sol-error-message");
+    if (!errorDisplay) {
+      errorDisplay = document.createElement("span");
+      errorDisplay.className = "sol-error-message";
+      input.parentNode.appendChild(errorDisplay);
     }
-    errorDisplay.textContent = message;
-    errorDisplay.style.display = "block";
-    inputElement.classList.add("is-invalid");
+    input.addEventListener("invalid", (e) => {
+      e.preventDefault();
+      updateValidationState(input, errorDisplay);
+    });
+    input.addEventListener("input", () => {
+      if (input.validity.valid) {
+        clearError(input, errorDisplay);
+      }
+    });
+    input.addEventListener("blur", () => {
+      updateValidationState(input, errorDisplay);
+    });
+  });
+}
+function updateValidationState(input, errorDisplay) {
+  if (input.validity.valid) {
+    clearError(input, errorDisplay);
+    return;
   }
-  function hideError() {
-    errorDisplay.style.display = "none";
-    inputElement.classList.remove("is-invalid");
+  let message = "Ongeldige invoer";
+  if (input.validity.valueMissing) {
+    message = "Dit veld is verplicht";
+  } else if (input.validity.typeMismatch) {
+    if (input.type === "email") message = "Voer een geldig e-mailadres in";
+    if (input.type === "url") message = "Voer een geldige link in";
+  } else if (input.validity.tooShort) {
+    message = `Minimaal ${input.minLength} tekens nodig`;
+  } else if (input.validity.rangeUnderflow) {
+    message = `Minimum waarde is ${input.min}`;
+  } else if (input.validity.patternMismatch) {
+    message = "De opmaak is onjuist";
   }
+  errorDisplay.textContent = message;
+  errorDisplay.style.display = "block";
+  input.classList.add("is-invalid");
+}
+function clearError(input, errorDisplay) {
+  errorDisplay.style.display = "none";
+  input.classList.remove("is-invalid");
 }
 
 // src/components/contextMenu.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerkhoff-ict/solora",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",