@verbb/formie-browser 1.0.12 → 1.0.14

package/src/js/validation/rules/shared.ts

@@ -1,4 +1,5 @@
 import type { ValidationContext, ValidationInput } from '#validation/types';
+import { isValidationSkipped } from '#validation/skip';
 
 export function stripTags(value: string): string {
     const doc = new DOMParser().parseFromString(value, 'text/html');
@@ -43,5 +44,8 @@ export function getComparableInput(ctx: ValidationContext): ValidationInput | nu
         return null;
     }
 
-    return sourceField.querySelector(ctx.config.fieldsSelector) as ValidationInput | null;
+    return Array.from(sourceField.querySelectorAll(ctx.config.fieldsSelector)).find((node): node is ValidationInput => {
+        return (node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement)
+            && !isValidationSkipped(node);
+    }) ?? null;
 }

package/src/js/validation/rules/url.ts

@@ -1,17 +1,10 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
 
 const url: ValidationRuleDefinition = {
     rule: ({ input, getRule }) => {
-        if (!getRule('url') || !input.value || input.value.length < 1) {
-            return true;
-        }
-
-        try {
-            new URL(input.value);
-            return true;
-        } catch {
-            return false;
-        }
+        const rule = getRule('url');
+        return !rule || validateBrowserValue(input.value, { ...(typeof rule === 'object' ? rule : {}), type: 'url' }) === null;
     },
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-pattern-url-message')

package/src/js/validation/skip.ts

@@ -0,0 +1,9 @@
+/**
+ * Controls marked with this attribute are not value carriers.
+ * The validator, live handlers, and match lookups all skip them.
+ */
+export const VALIDATION_SKIP_ATTR = 'data-formie-validation-skip';
+
+export function isValidationSkipped(element: Element | null): boolean {
+    return !!element && element.hasAttribute(VALIDATION_SKIP_ATTR);
+}

package/src/js/validation/submit-readiness.ts

@@ -6,7 +6,10 @@ const PRESERVED_DISABLED_ATTR = 'data-formie-preserve-disabled';
 const SUBMIT_READY_ATTR = 'data-formie-submit-ready';
 
 function isSubmitReadinessEnabled(form: HTMLFormElement): boolean {
-    return form.dataset.formieDisableSubmitUntilValid === 'true';
+    const value = form.dataset.formieDisableSubmitUntilValid?.trim().toLowerCase();
+
+    // Twig renders enabled boolean data attributes without a value.
+    return value === '' || value === 'true' || value === '1';
 }
 
 function getPrimarySubmitButtons(form: HTMLFormElement): HTMLButtonElement[] {
@@ -65,7 +68,11 @@ export function syncSubmitReadiness(form: HTMLFormElement, validator: FormieVali
             button.setAttribute(SUBMIT_VALIDATION_DISABLED_ATTR, 'true');
         }
 
-        button.disabled = true;
+        // Observing `disabled` also catches external changes. Avoid scheduling
+        // another observer pass when the button already has the required state.
+        if (!button.disabled) {
+            button.disabled = true;
+        }
     });
 }
 

package/src/js/validation/validator.ts

@@ -1,4 +1,8 @@
 import { ensureFieldErrorContainer } from '#core/field-error-container';
+import {
+    clearFieldErrorAria,
+    setErrorMessageReference,
+} from '#core/field-error-aria';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import rules from '#validation/rules';
 import { applyErrorAriaLive, resolveValidationErrorAriaLive } from '#core/error-aria-live';
@@ -12,6 +16,7 @@ import type {
 import { t } from '#utils/i18n';
 import { getValidatorEventName } from '#utils/event-names';
 import { createDebug } from '#utils/debug';
+import { isValidationSkipped } from '#validation/skip';
 
 type ValidatorDefinition = {
     validate: (ctx: ValidationContext) => boolean;
@@ -42,44 +47,8 @@ function isValidationInput(node: Element | null): node is ValidationInput {
     );
 }
 
-function removeDescribedBy(input: HTMLElement, describedById: string): void {
-    const current = (input.getAttribute('aria-describedby') || '').trim();
-
-    if (!current) {
-        return;
-    }
-
-    const filtered = current.split(/\s+/).filter((item) => {
-        return item !== describedById;
-    });
-
-    if (filtered.length) {
-        input.setAttribute('aria-describedby', filtered.join(' '));
-        return;
-    }
-
-    input.removeAttribute('aria-describedby');
-}
-
-function appendDescribedBy(input: HTMLElement, describedById: string): void {
-    const current = (input.getAttribute('aria-describedby') || '').trim();
-    const items = current ? current.split(/\s+/) : [];
-
-    if (!items.includes(describedById)) {
-        items.push(describedById);
-    }
-
-    input.setAttribute('aria-describedby', items.join(' ').trim());
-}
-
-function setErrorMessageReference(input: HTMLElement, errorMessageId: string): void {
-    input.setAttribute('aria-errormessage', errorMessageId);
-}
-
-function clearErrorMessageReference(input: HTMLElement, errorMessageId: string): void {
-    if (input.getAttribute('aria-errormessage') === errorMessageId) {
-        input.removeAttribute('aria-errormessage');
-    }
+function isPainted(element: HTMLElement): boolean {
+    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
 
 export class FormieValidator {
@@ -142,13 +111,13 @@ export class FormieValidator {
 
     inputs(inputOrSelector: Element | null = null): ValidationInput[] {
         if (isValidationInput(inputOrSelector)) {
-            return [inputOrSelector];
+            return isValidationSkipped(inputOrSelector) ? [] : [inputOrSelector];
         }
 
         const root = inputOrSelector || this.form;
 
         return Array.from(root.querySelectorAll(this.config.fieldsSelector)).filter((input): input is ValidationInput => {
-            return isValidationInput(input);
+            return isValidationInput(input) && !isValidationSkipped(input);
         });
     }
 
@@ -266,7 +235,11 @@ export class FormieValidator {
         }
 
         const errorMessages = fieldContainer.querySelector('[data-formie-field-errors]') as HTMLElement | null;
-        const errorContainerId = errorMessages?.id || '';
+        // Capture message ids before nodes are removed so aria-errormessage / describedby
+        // can be cleared (querying after remove finds nothing).
+        const errorMessageIds = Array.from(fieldContainer.querySelectorAll('[data-formie-field-error]')).map((node) => {
+            return (node as HTMLElement).id;
+        }).filter(Boolean);
 
         fieldContainer.querySelectorAll('[data-formie-field-error]').forEach((node) => {
             node.remove();
@@ -283,18 +256,7 @@ export class FormieValidator {
                 element.classList.remove(...this.config.inputErrorClass);
             }
             element.removeAttribute('data-formie-input-has-error');
-
-            if (errorContainerId) {
-                removeDescribedBy(element, errorContainerId);
-            }
-
-            fieldContainer.querySelectorAll('[data-formie-field-error]').forEach((errorNode) => {
-                const errorMessageId = (errorNode as HTMLElement).id;
-
-                if (errorMessageId) {
-                    clearErrorMessageReference(element, errorMessageId);
-                }
-            });
+            clearFieldErrorAria(element, errorMessageIds);
         });
 
         // Nested field wrappers inherit error state so repeaters/groups can reflect
@@ -347,7 +309,6 @@ export class FormieValidator {
         errorElement.setAttribute('data-formie-field-error', 'true');
         errorElement.setAttribute(`data-formie-field-error-${validatorName}`, 'true');
         errorElement.setAttribute('id', errorId);
-        errorElement.setAttribute('role', 'alert');
         if (this.config.messageClass.length) {
             errorElement.classList.add(...this.config.messageClass);
         }
@@ -358,12 +319,17 @@ export class FormieValidator {
 
         fieldContainer.querySelectorAll('input, select, textarea').forEach((fieldInput) => {
             const element = fieldInput as HTMLElement;
+
+            if (isValidationSkipped(element)) {
+                return;
+            }
+
             element.setAttribute('aria-invalid', 'true');
             if (this.config.inputErrorClass.length) {
                 element.classList.add(...this.config.inputErrorClass);
             }
             element.setAttribute('data-formie-input-has-error', 'true');
-            appendDescribedBy(element, errorMessages.id);
+            // Pair aria-errormessage + aria-describedby on the message id (#2946).
             setErrorMessageReference(element, errorId);
         });
 
@@ -509,11 +475,21 @@ export class FormieValidator {
             return !!options.includeHiddenPages;
         }
 
-        return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+        // Rich Text keeps the real <textarea> in a display:none wrapper while the
+        // contenteditable UI is painted. Geometry on the textarea is always zero,
+        // so validate against the editor host when present (#2947).
+        const field = element.closest('[data-formie-field-handle]');
+        const richTextHost = field?.querySelector('[data-formie-rich-text]');
+
+        if (richTextHost instanceof HTMLElement) {
+            return isPainted(richTextHost);
+        }
+
+        return isPainted(element);
     }
 
     blurHandler(event: Event): void {
-        if (!(event.target instanceof HTMLElement) || !isValidationInput(event.target) || !event.target.form?.isSameNode(this.form)) {
+        if (!(event.target instanceof HTMLElement) || !isValidationInput(event.target) || isValidationSkipped(event.target) || !event.target.form?.isSameNode(this.form)) {
             return;
         }
 
@@ -539,7 +515,7 @@ export class FormieValidator {
     }
 
     changeHandler(event: Event): void {
-        if (!(event.target instanceof HTMLElement) || !isValidationInput(event.target) || !event.target.form?.isSameNode(this.form)) {
+        if (!(event.target instanceof HTMLElement) || !isValidationInput(event.target) || isValidationSkipped(event.target) || !event.target.form?.isSameNode(this.form)) {
             return;
         }
 
@@ -570,7 +546,7 @@ export class FormieValidator {
     }
 
     inputHandler(event: Event): void {
-        if (!(event.target instanceof HTMLElement) || !isValidationInput(event.target) || !event.target.form?.isSameNode(this.form)) {
+        if (!(event.target instanceof HTMLElement) || !isValidationInput(event.target) || isValidationSkipped(event.target) || !event.target.form?.isSameNode(this.form)) {
             return;
         }
 

package/dist/chunks/calculations-DERi2xaC.js

@@ -1,299 +0,0 @@
-import { t as e } from "./debug-BV0DvdHx.js";
-import { r as t, t as n } from "./field-references.keys-58ZSTrCW.js";
-import { n as r, r as i } from "./field-references.resolver-CHwn0G0L.js";
-import { r as a, t as o } from "./shared-Bx9s0i0P.js";
-import { c as s, i as c, r as l, s as u, t as d } from "./dist-BdUy8m_p.js";
-//#region src/js/utils/field-references.row-scope.ts
-var f = new Set([
-	"first",
-	"last",
-	"index",
-	"all",
-	"count",
-	"rows"
-]);
-function p(e) {
-	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function m(e, t) {
-	let n = String(e || "").trim().toLowerCase();
-	if (!n || t <= 0) return [];
-	if (n === "even") {
-		let e = [];
-		for (let n = 1; n <= t; n++) n % 2 == 0 && e.push(n - 1);
-		return e;
-	}
-	if (n === "odd") {
-		let e = [];
-		for (let n = 1; n <= t; n++) n % 2 == 1 && e.push(n - 1);
-		return e;
-	}
-	let r = n.match(/^every:(\d+)$/);
-	if (r) {
-		let e = Math.max(1, Number.parseInt(r[1] || "1", 10)), n = [];
-		for (let r = 1; r <= t; r += e) n.push(r - 1);
-		return n;
-	}
-	let i = [];
-	return n.split(/\s*,\s*/).forEach((e) => {
-		let n = e.trim();
-		if (!n) return;
-		let r = n.match(/^(\d+)\s*-\s*(\d+)$/);
-		if (r) {
-			let e = Number.parseInt(r[1] || "0", 10), n = Number.parseInt(r[2] || "0", 10);
-			e > n && ([e, n] = [n, e]);
-			for (let r = e; r <= n; r++) r >= 1 && r <= t && i.push(r - 1);
-			return;
-		}
-		let a = Number.parseInt(n, 10);
-		Number.isFinite(a) && a >= 1 && a <= t && i.push(a - 1);
-	}), [...new Set(i)].sort((e, t) => e - t);
-}
-function h(e) {
-	let n = t(e), r = n.split(".").filter(Boolean);
-	return r.length < 2 ? {
-		fieldKey: n,
-		columnKey: r[r.length - 1] || ""
-	} : r.length >= 3 && /^\d+$/.test(r[1] || "") ? {
-		fieldKey: r[0] || "",
-		columnKey: r.slice(2).join(".")
-	} : {
-		fieldKey: r[0] || "",
-		columnKey: r.slice(1).join(".")
-	};
-}
-function g(e, t, n) {
-	let r = RegExp(`^${p(e)}\\.(\\d+)\\.${p(t)}$`);
-	return [...n.keys()].filter((e) => r.test(e)).sort((e, t) => Number.parseInt(e.split(".")[1] || "0", 10) - Number.parseInt(t.split(".")[1] || "0", 10));
-}
-function _(e, t) {
-	return r(e, t).value;
-}
-function v(e, t, r) {
-	let i = /* @__PURE__ */ new Set(), { fieldKey: a, columnKey: o } = h(e), s = String(t.scope || "").trim().toLowerCase();
-	if (!a || !o || !f.has(s)) {
-		let t = n(e);
-		return t && (i.add(t), i.add(`${t}[]`)), i;
-	}
-	return g(a, o, r).forEach((e) => {
-		let t = r.get(e);
-		if (t?.names?.length) {
-			t.names.forEach((e) => {
-				i.add(e);
-			});
-			return;
-		}
-		let a = n(e);
-		a && (i.add(a), i.add(`${a}[]`));
-	}), i;
-}
-function y(e, t, n) {
-	let i = String(t.scope || "").trim().toLowerCase();
-	if (!i || !f.has(i)) return r(e, n);
-	let { fieldKey: a, columnKey: o } = h(e);
-	if (!a || !o) return r(e, n);
-	let s = g(a, o, n), c = s.map((e) => _(e, n));
-	if (i === "count") return {
-		key: `${a}.${o}`,
-		value: String(s.length),
-		found: !0
-	};
-	if (i === "first") return {
-		key: s[0] || `${a}.0.${o}`,
-		value: c[0] ?? "",
-		found: s.length > 0
-	};
-	if (i === "last") return {
-		key: s[s.length - 1] || `${a}.0.${o}`,
-		value: c[c.length - 1] ?? "",
-		found: s.length > 0
-	};
-	if (i === "index") return r(`${a}.${Number.parseInt(String(t.index ?? "0"), 10)}.${o}`, n);
-	if (i === "all") {
-		let e = c.flatMap((e) => Array.isArray(e) ? e : e === "" ? [] : [e]);
-		return {
-			key: `${a}.${o}`,
-			value: e,
-			found: e.length > 0
-		};
-	}
-	if (i === "rows") {
-		let e = m(String(t.rows || ""), s.length);
-		if (e.length === 0) return {
-			key: `${a}.${o}`,
-			value: "",
-			found: !1
-		};
-		if (e.length === 1) return {
-			key: s[e[0]] || `${a}.${e[0]}.${o}`,
-			value: c[e[0]] ?? "",
-			found: !0
-		};
-		let n = e.flatMap((e) => {
-			let t = c[e];
-			return Array.isArray(t) ? t : t === "" ? [] : [t];
-		});
-		return {
-			key: `${a}.${o}`,
-			value: n,
-			found: n.length > 0
-		};
-	}
-	return r(e, n);
-}
-//#endregion
-//#region src/js/modules/fields/calculations.ts
-var b = "input[data-formie-calculation-input]";
-function x(e) {
-	let t = e;
-	return {
-		scope: t.scope,
-		index: t.index,
-		rows: t.rows,
-		fieldKind: t.fieldKind
-	};
-}
-var S = "calculations", C = e("fields", "calculations");
-function w(e, t, n) {
-	let a = i(e), o = {};
-	return t.forEach(([e, t]) => {
-		let n = x(t);
-		if (String(n.scope || "").trim()) {
-			o[e] = l(t, y(t.sourceKey || "", n, a).value);
-			return;
-		}
-		o[e] = l(t, r(t.sourceKey || "", a).value);
-	}), d(o, n.formatting);
-}
-function T(e, r) {
-	let a = i(e), o = /* @__PURE__ */ new Set();
-	return r.forEach(([, e]) => {
-		let r = x(e);
-		if (String(r.scope || "").trim()) {
-			v(e.sourceKey || "", r, a).forEach((e) => {
-				o.add(e);
-			});
-			return;
-		}
-		let i = t(e.sourceKey || ""), s = a.get(i);
-		if (s?.names?.length) {
-			s.names.forEach((e) => {
-				o.add(e);
-			});
-			return;
-		}
-		let c = n(i);
-		c && (o.add(c), o.add(`${c}[]`));
-	}), o;
-}
-function E(e, t, n, r) {
-	let i = s(r), a = c(r), l = /* @__PURE__ */ new Map(), d = null, f = !1, p = !1, m = !1, h = () => {
-		l.forEach((e, t) => {
-			e.forEach((e, n) => {
-				t.removeEventListener(n, e);
-			});
-		}), l.clear();
-	}, g = (e) => {
-		!e || f || queueMicrotask(() => {
-			f || (n.dispatchEvent(new Event("input", { bubbles: !0 })), n.dispatchEvent(new Event("change", { bubbles: !0 })));
-		});
-	}, _ = (s = !1) => {
-		let c = w(e, a, r);
-		C.log("Evaluate requested.", {
-			fieldHandle: t.getAttribute("data-formie-field-handle") || null,
-			isInit: s
-		});
-		let l = {
-			calculations: n,
-			init: s,
-			formula: i,
-			variables: c
-		};
-		if (o(t, S, "before-evaluate", l), !l.formula) {
-			let e = n.value !== "";
-			n.value = "", g(e);
-			return;
-		}
-		try {
-			let e = u(l.formula, l.variables, r), i = {
-				calculations: n,
-				init: s,
-				formula: l.formula,
-				variables: l.variables,
-				result: e
-			};
-			o(t, S, "after-evaluate", i);
-			let a = typeof i.result == "string" || typeof i.result == "number" ? String(i.result) : "", c = n.value !== a;
-			n.value = a, C.log("Evaluate complete.", {
-				fieldHandle: t.getAttribute("data-formie-field-handle") || null,
-				valueChanged: c,
-				nextValue: a
-			}), g(c);
-		} catch (e) {
-			let r = n.value !== "";
-			console.error("[formie] Failed to evaluate calculation.", e), C.warn("Evaluate failed.", {
-				fieldHandle: t.getAttribute("data-formie-field-handle") || null,
-				error: e instanceof Error ? e.message : e
-			}), n.value = "", g(r);
-		}
-	}, v = (e = !1) => {
-		p || f || (p = !0, queueMicrotask(() => {
-			p = !1, _(e);
-		}));
-	}, y = () => {
-		h();
-		let n = T(e, a);
-		if (C.log("Binding variable watchers.", {
-			fieldHandle: t.getAttribute("data-formie-field-handle") || null,
-			watchCount: n.size
-		}), !n.size) return;
-		let r = (e) => {
-			let r = e.target?.name || "";
-			!r || !n.has(r) || (C.log("Source change detected.", {
-				fieldHandle: t.getAttribute("data-formie-field-handle") || null,
-				sourceName: r,
-				eventType: e.type
-			}), v(!1));
-		};
-		["input", "change"].forEach((t) => {
-			e.addEventListener(t, r);
-			let n = l.get(e) || /* @__PURE__ */ new Map();
-			n.set(t, r), l.set(e, n);
-		});
-	}, b = () => {
-		m || f || (m = !0, queueMicrotask(() => {
-			m = !1, y(), v(!1);
-		}));
-	};
-	return y(), d = new MutationObserver(() => {
-		b();
-	}), d.observe(e, {
-		childList: !0,
-		subtree: !0
-	}), _(!0), () => {
-		f = !0, d?.disconnect(), h();
-	};
-}
-var D = {
-	id: S,
-	kind: "field",
-	match: (e) => !!e.target.querySelector(b),
-	setup: async (e) => {
-		let t = e.options || {}, n = a(e);
-		C.log("Module setup.", {
-			fieldCount: n.length,
-			formatting: t.formatting || null
-		});
-		let r = n.map((n) => {
-			let r = n.querySelector(b);
-			return r instanceof HTMLInputElement ? E(e.root, n, r, t) : () => {};
-		});
-		return await e.emit("formie:module:calculations:init", { count: r.length }), { destroy: () => {
-			C.log("Module destroy.", { fieldCount: r.length }), r.forEach((e) => {
-				e();
-			}), e.emit("formie:module:calculations:destroy", {});
-		} };
-	}
-};
-//#endregion
-export { D as calculationsModule };