@verbb/formie-browser 1.0.2 → 1.0.4

package/src/js/utils/i18n.ts

@@ -79,18 +79,197 @@ export function mergeFormieTranslations(translations: Record<string, string>): R
     return getFormieTranslations();
 }
 
-export function t(message: string, replacements: TranslationReplacements = {}): string {
-    let output = getTranslationStore()[message] || message;
+function parsePluralBranches(body: string): Record<string, string> {
+    const branches: Record<string, string> = {};
+    let index = 0;
+
+    while (index < body.length) {
+        while (index < body.length && /\s/.test(body[index])) {
+            index++;
+        }
+
+        if (index >= body.length) {
+            break;
+        }
+
+        const branchMatch = body.slice(index).match(/^(\w+|=\d+)\{/);
+
+        if (!branchMatch) {
+            break;
+        }
+
+        const key = branchMatch[1];
+        index += branchMatch[0].length;
+
+        let depth = 1;
+        const contentStart = index;
+
+        while (index < body.length && depth > 0) {
+            if (body[index] === '{') {
+                depth++;
+            } else if (body[index] === '}') {
+                depth--;
+            }
+
+            if (depth > 0) {
+                index++;
+            }
+        }
+
+        branches[key] = body.slice(contentStart, index);
+        index++;
+    }
+
+    return branches;
+}
+
+function selectPluralBranch(count: number, branches: Record<string, string>): string {
+    const exactKey = `=${count}`;
+
+    if (Object.prototype.hasOwnProperty.call(branches, exactKey)) {
+        return branches[exactKey];
+    }
+
+    if (typeof Intl !== 'undefined' && typeof Intl.PluralRules === 'function') {
+        const category = new Intl.PluralRules().select(count);
+
+        if (Object.prototype.hasOwnProperty.call(branches, category)) {
+            return branches[category];
+        }
+    }
+
+    if (count === 1 && Object.prototype.hasOwnProperty.call(branches, 'one')) {
+        return branches.one;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(branches, 'other')) {
+        return branches.other;
+    }
+
+    const firstKey = Object.keys(branches)[0];
+
+    return firstKey ? branches[firstKey] : '';
+}
+
+function parsePluralExpression(message: string, startIndex: number): { param: string; body: string; endIndex: number } | null {
+    const headerMatch = message.slice(startIndex).match(/^\{(\w+),\s*plural,\s*/);
+
+    if (!headerMatch) {
+        return null;
+    }
+
+    const param = headerMatch[1];
+    const bodyStart = startIndex + headerMatch[0].length;
+    let index = bodyStart;
+
+    while (index < message.length) {
+        while (index < message.length && /\s/.test(message[index])) {
+            index++;
+        }
+
+        if (index >= message.length || message[index] === '}') {
+            break;
+        }
+
+        const branchMatch = message.slice(index).match(/^(\w+|=\d+)\{/);
 
-    // Keep replacement syntax intentionally small and predictable because these
-    // messages are often shared across PHP-rendered and JS-rendered validation UI.
-    output = output.replace(/{([a-zA-Z0-9]+)}/g, (match, key) => {
+        if (!branchMatch) {
+            return null;
+        }
+
+        index += branchMatch[0].length;
+
+        let depth = 1;
+
+        while (index < message.length && depth > 0) {
+            if (message[index] === '{') {
+                depth++;
+            } else if (message[index] === '}') {
+                depth--;
+            }
+
+            if (depth > 0) {
+                index++;
+            }
+        }
+
+        index++;
+    }
+
+    if (index >= message.length || message[index] !== '}') {
+        return null;
+    }
+
+    return {
+        param,
+        body: message.slice(bodyStart, index),
+        endIndex: index,
+    };
+}
+
+function formatPluralBlocks(message: string, replacements: TranslationReplacements): string {
+    let output = '';
+    let index = 0;
+
+    while (index < message.length) {
+        if (message[index] !== '{') {
+            output += message[index];
+            index++;
+            continue;
+        }
+
+        const parsed = parsePluralExpression(message, index);
+
+        if (!parsed) {
+            output += message[index];
+            index++;
+            continue;
+        }
+
+        const rawValue = replacements[parsed.param];
+        const count = typeof rawValue === 'number'
+            ? rawValue
+            : Number.parseInt(String(rawValue ?? ''), 10) || 0;
+        const branches = parsePluralBranches(parsed.body);
+        let selected = selectPluralBranch(count, branches);
+
+        selected = selected.replace(/#/g, String(count));
+
+        output += selected;
+        index = parsed.endIndex + 1;
+    }
+
+    return output;
+}
+
+function formatNumberBlocks(message: string, replacements: TranslationReplacements): string {
+    return message.replace(/\{(\w+),\s*number\}/g, (match, key) => {
+        if (!Object.prototype.hasOwnProperty.call(replacements, key)) {
+            return match;
+        }
+
+        const value = replacements[key];
+
+        return typeof value === 'number' ? value.toLocaleString() : String(value);
+    });
+}
+
+function replaceSimpleTokens(message: string, replacements: TranslationReplacements): string {
+    return message.replace(/\{(\w+)\}/g, (match, key) => {
         if (Object.prototype.hasOwnProperty.call(replacements, key)) {
             return String(replacements[key]);
         }
 
         return match;
     });
+}
+
+export function t(message: string, replacements: TranslationReplacements = {}): string {
+    let output = getTranslationStore()[message] || message;
+
+    output = formatPluralBlocks(output, replacements);
+    output = formatNumberBlocks(output, replacements);
+    output = replaceSimpleTokens(output, replacements);
 
     return output;
 }

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

@@ -9,9 +9,10 @@ const email: ValidationRuleDefinition = {
         return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
     },
     message: ({ input, label, t }) => {
-        return input.getAttribute('data-formie-pattern-email-message')
+        return input.getAttribute('data-formie-validation-email-message')
+            ?? input.getAttribute('data-formie-pattern-email-message')
             ?? input.getAttribute('data-pattern-email-message')
-            ?? t('{attribute} is not a valid email address.', { attribute: label });
+            ?? t('{label} is not a valid email address.', { label });
     },
 };
 

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

@@ -16,8 +16,8 @@ const match: ValidationRuleDefinition = {
         const sourceField = sourceInput?.closest('[data-formie-field-handle]') as HTMLElement | null;
         const sourceLabel = getLabelText(sourceField);
 
-        return ctx.t('{name} must match {value}.', {
-            name: ctx.label,
+        return ctx.t('{label} must match {value}.', {
+            label: ctx.label,
             value: sourceLabel,
         });
     },

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

@@ -29,18 +29,18 @@ const minmax: ValidationRuleDefinition = {
         const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max') || '') : null;
 
         if (min !== null && max !== null) {
-            return t('{attribute} must be between {min} and {max}.', { attribute: label, min, max });
+            return t('{label} must be between {min} and {max}.', { label, min, max });
         }
 
         if (min !== null) {
-            return t('{attribute} must be no less than {min}.', { attribute: label, min });
+            return t('{label} must be no less than {min}.', { label, min });
         }
 
         if (max !== null) {
-            return t('{attribute} must be no greater than {max}.', { attribute: label, max });
+            return t('{label} must be no greater than {max}.', { label, max });
         }
 
-        return t('{attribute} has an invalid value.', { attribute: label });
+        return t('{label} has an invalid value.', { label });
     },
 };
 

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

@@ -35,20 +35,24 @@ const number: ValidationRuleDefinition = {
         const max = rule !== true && rule && typeof rule === 'object' && typeof rule.max === 'number' ? rule.max : null;
 
         if (min !== null && max !== null) {
-            return t('{attribute} must be between {min} and {max}.', { attribute: label, min, max });
+            return input.getAttribute('data-formie-validation-number-min-message')
+                ?? t('{label} must be between {min} and {max}.', { label, min, max });
         }
 
         if (min !== null) {
-            return t('{attribute} must be no less than {min}.', { attribute: label, min });
+            return input.getAttribute('data-formie-validation-number-min-message')
+                ?? t('{label} must be no less than {min}.', { label, min });
         }
 
         if (max !== null) {
-            return t('{attribute} must be no greater than {max}.', { attribute: label, max });
+            return input.getAttribute('data-formie-validation-number-max-message')
+                ?? t('{label} must be no greater than {max}.', { label, max });
         }
 
-        return input.getAttribute('data-formie-pattern-number-message')
+        return input.getAttribute('data-formie-validation-number-message')
+            ?? input.getAttribute('data-formie-pattern-number-message')
             ?? input.getAttribute('data-pattern-number-message')
-            ?? t('{attribute} is not a valid number.', { attribute: label });
+            ?? t('{label} is not a valid number.', { label });
     },
 };
 

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

@@ -13,10 +13,10 @@ const pattern: ValidationRuleDefinition = {
     },
     message: ({ input, label, t }) => {
         const messages = {
-            email: t('{attribute} is not a valid email address.', { attribute: label }),
-            url: t('{attribute} is not a valid URL.', { attribute: label }),
-            number: t('{attribute} is not a valid number.', { attribute: label }),
-            default: t('{attribute} is not a valid format.', { attribute: label }),
+            email: t('{label} is not a valid email address.', { label }),
+            url: t('{label} is not a valid URL.', { label }),
+            number: t('{label} is not a valid number.', { label }),
+            default: t('{label} is not a valid format.', { label }),
         };
 
         return input.getAttribute(`data-formie-pattern-${input.type}-message`)

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

@@ -23,7 +23,7 @@ const required: ValidationRuleDefinition = {
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-required-message')
             ?? input.getAttribute('data-required-message')
-            ?? t('{attribute} cannot be blank.', { attribute: label });
+            ?? t('{label} cannot be blank.', { label });
     },
 };
 

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

@@ -16,7 +16,7 @@ const url: ValidationRuleDefinition = {
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-pattern-url-message')
             ?? input.getAttribute('data-pattern-url-message')
-            ?? t('{attribute} is not a valid URL.', { attribute: label });
+            ?? t('{label} is not a valid URL.', { label });
     },
 };
 

package/src/js/validation/scope.ts

@@ -0,0 +1,25 @@
+export function getFormPages(form: HTMLFormElement): HTMLElement[] {
+    return Array.from(form.querySelectorAll('[data-formie-page]')) as HTMLElement[];
+}
+
+export function getValidationScope(form: HTMLFormElement): { scope: Element; final: boolean } {
+    const pages = getFormPages(form);
+
+    if (!pages.length) {
+        return {
+            scope: form,
+            final: true,
+        };
+    }
+
+    // Multi-page submits validate the visible page until the user reaches the
+    // final step, where hidden earlier pages are included again.
+    const currentPage = pages.find((page) => {
+        return !page.hasAttribute('data-formie-page-hidden');
+    }) || pages[pages.length - 1];
+
+    return {
+        scope: currentPage,
+        final: currentPage === pages[pages.length - 1],
+    };
+}

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

@@ -0,0 +1,157 @@
+import { getValidationScope } from '#validation/scope';
+import type { FormieValidator } from '#validation/validator';
+
+const SUBMIT_VALIDATION_DISABLED_ATTR = 'data-formie-submit-validation-disabled';
+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';
+}
+
+function getPrimarySubmitButtons(form: HTMLFormElement): HTMLButtonElement[] {
+    return Array.from(form.querySelectorAll('button[data-formie-action="submit"]')).filter((button): button is HTMLButtonElement => {
+        return button instanceof HTMLButtonElement;
+    });
+}
+
+function isSubmitButtonVisible(button: HTMLButtonElement): boolean {
+    return !button.hasAttribute('data-formie-conditionally-hidden')
+        && !button.closest('[data-formie-conditionally-hidden]');
+}
+
+export function syncSubmitReadiness(form: HTMLFormElement, validator: FormieValidator): void {
+    if (!isSubmitReadinessEnabled(form)) {
+        return;
+    }
+
+    if (form.getAttribute('data-formie-loading') === 'true') {
+        return;
+    }
+
+    const { scope, final } = getValidationScope(form);
+    const isReady = validator.isValid(scope, {
+        includeHiddenPages: final,
+    });
+
+    form.setAttribute(SUBMIT_READY_ATTR, isReady ? 'true' : 'false');
+
+    getPrimarySubmitButtons(form).forEach((button) => {
+        if (!isSubmitButtonVisible(button)) {
+            return;
+        }
+
+        if (isReady) {
+            if (!button.hasAttribute(SUBMIT_VALIDATION_DISABLED_ATTR)) {
+                return;
+            }
+
+            if (button.hasAttribute(PRESERVED_DISABLED_ATTR)) {
+                button.disabled = true;
+                button.removeAttribute(PRESERVED_DISABLED_ATTR);
+            } else {
+                button.disabled = false;
+            }
+
+            button.removeAttribute(SUBMIT_VALIDATION_DISABLED_ATTR);
+            return;
+        }
+
+        if (!button.hasAttribute(SUBMIT_VALIDATION_DISABLED_ATTR)) {
+            if (button.disabled) {
+                button.setAttribute(PRESERVED_DISABLED_ATTR, 'true');
+            }
+
+            button.setAttribute(SUBMIT_VALIDATION_DISABLED_ATTR, 'true');
+        }
+
+        button.disabled = true;
+    });
+}
+
+export function bindSubmitReadiness(
+    form: HTMLFormElement,
+    validator: FormieValidator,
+    target: Element,
+): () => void {
+    if (!isSubmitReadinessEnabled(form)) {
+        return () => {};
+    }
+
+    let syncQueued = false;
+
+    const scheduleSync = (): void => {
+        if (syncQueued) {
+            return;
+        }
+
+        syncQueued = true;
+
+        queueMicrotask(() => {
+            syncQueued = false;
+            syncSubmitReadiness(form, validator);
+        });
+    };
+
+    scheduleSync();
+
+    const inputHandler = (): void => {
+        scheduleSync();
+    };
+
+    form.addEventListener('input', inputHandler, true);
+    form.addEventListener('change', inputHandler, true);
+
+    const resetHandler = (): void => {
+        window.setTimeout(() => {
+            scheduleSync();
+        }, 0);
+    };
+
+    form.addEventListener('reset', resetHandler);
+
+    const conditionsHandler = (): void => {
+        scheduleSync();
+    };
+
+    target.addEventListener('formie:conditions:evaluated', conditionsHandler as EventListener);
+
+    const observer = new MutationObserver((mutations) => {
+        const shouldSync = mutations.some((mutation) => {
+            if (mutation.type === 'attributes') {
+                const attributeName = mutation.attributeName || '';
+
+                return attributeName === 'data-formie-page-hidden'
+                    || attributeName === 'data-formie-conditionally-hidden'
+                    || attributeName === 'data-formie-loading'
+                    || attributeName === 'disabled';
+            }
+
+            return mutation.type === 'childList';
+        });
+
+        if (shouldSync) {
+            scheduleSync();
+        }
+    });
+
+    observer.observe(form, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: [
+            'data-formie-page-hidden',
+            'data-formie-conditionally-hidden',
+            'data-formie-loading',
+            'disabled',
+        ],
+    });
+
+    return () => {
+        form.removeEventListener('input', inputHandler, true);
+        form.removeEventListener('change', inputHandler, true);
+        form.removeEventListener('reset', resetHandler);
+        target.removeEventListener('formie:conditions:evaluated', conditionsHandler as EventListener);
+        observer.disconnect();
+    };
+}

package/src/js/validation/validator.ts

@@ -1,3 +1,4 @@
+import { ensureFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import rules from '#validation/rules';
 import type {
@@ -176,6 +177,10 @@ export class FormieValidator {
         return this.submitted || this.activated.has(input);
     }
 
+    isValid(inputOrSelector: Element | null = null, options: ValidateOptions = {}): boolean {
+        return this.validate(inputOrSelector, options).length === 0;
+    }
+
     validate(inputOrSelector: Element | null = null, options: ValidateOptions = {}): ValidationError[] {
         this.errors = [];
 
@@ -316,12 +321,11 @@ export class FormieValidator {
         let errorMessages = fieldContainer.querySelector('[data-formie-field-errors]') as HTMLElement | null;
 
         if (!errorMessages) {
-            errorMessages = document.createElement('div');
-            errorMessages.setAttribute('data-formie-field-errors', 'true');
-            if (this.config.messagesClass.length) {
-                errorMessages.classList.add(...this.config.messagesClass);
-            }
-            fieldContainer.appendChild(errorMessages);
+            errorMessages = ensureFieldErrorContainer(fieldContainer, (container) => {
+                if (this.config.messagesClass.length) {
+                    container.classList.add(...this.config.messagesClass);
+                }
+            });
         }
 
         if (this.config.messagesClass.length) {
@@ -398,7 +402,7 @@ export class FormieValidator {
 
     getErrorMessage(input: ValidationInput, validatorName: string, validator: ValidatorDefinition, opts: ValidationContext): string {
         const errorMessage = typeof validator.errorMessage === 'function' ? validator.errorMessage(opts) : validator.errorMessage;
-        return errorMessage ?? t('{attribute} is invalid.', { attribute: opts.label });
+        return errorMessage ?? t('{label} is invalid.', { label: opts.label });
     }
 
     getErrors(): ValidationError[] {