@verbb/formie-browser 1.0.3 → 1.0.4

package/src/js/core/submit-result-state.ts

@@ -102,6 +102,16 @@ function getConfiguredSubmitAction(form: HTMLFormElement): string {
     return (form.dataset.formieSubmitAction || '').trim();
 }
 
+function getResolvedSubmitAction(form: HTMLFormElement, result: FormSubmitResult): string {
+    const fromResponse = result.meta?.effectiveSubmitAction;
+
+    if (typeof fromResponse === 'string' && fromResponse.trim() !== '') {
+        return fromResponse.trim();
+    }
+
+    return getConfiguredSubmitAction(form);
+}
+
 function shouldHideFormOnSuccess(form: HTMLFormElement): boolean {
     const rawValue = form.dataset.formieSubmitActionFormHide;
 
@@ -580,7 +590,7 @@ export function applySubmitResultState(form: HTMLFormElement, result: FormSubmit
     }
 
     if (action === 'submit' && !result.redirect?.url) {
-        const configuredSubmitAction = getConfiguredSubmitAction(form);
+        const configuredSubmitAction = getResolvedSubmitAction(form, result);
         const preserveHiddenState = configuredSubmitAction === 'message' && shouldHideFormOnSuccess(form);
 
         if (configuredSubmitAction === 'reload') {
@@ -603,7 +613,7 @@ export function applySubmitResultState(form: HTMLFormElement, result: FormSubmit
     }
 
     if (action === 'submit' && result.redirect?.url && result.redirect.target === 'new-tab') {
-        const configuredSubmitAction = getConfiguredSubmitAction(form);
+        const configuredSubmitAction = getResolvedSubmitAction(form, result);
         const preserveHiddenState = configuredSubmitAction === 'message' && shouldHideFormOnSuccess(form);
         clearPendingFinalSubmitReset(form);
         resetSubmissionState(form, { preserveHiddenState });

package/src/js/core/submit-result-ui.ts

@@ -1,4 +1,5 @@
 import type { FormSubmitResult } from '#contracts/schema';
+import { ensureFieldErrorContainer as resolveFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import { setFormHiddenState } from '#core/submit-result-state';
 import { addThemeClasses, removeThemeClasses } from '#theme/theme-classes';
@@ -150,16 +151,9 @@ function ensureFormSuccessContainer(form: HTMLFormElement, position: string): HT
 }
 
 function ensureFieldErrorContainer(fieldNode: Element): HTMLElement {
-    let container = fieldNode.querySelector('[data-formie-field-errors]') as HTMLElement | null;
-
-    if (!container) {
-        container = document.createElement('div');
-        container.setAttribute('data-formie-field-errors', 'true');
+    return resolveFieldErrorContainer(fieldNode, (container) => {
         addThemeClasses(container, fieldNode, 'fieldErrors');
-        fieldNode.appendChild(container);
-    }
-
-    return container;
+    });
 }
 
 function removeDescribedBy(input: HTMLElement, describedById: string): void {

package/src/js/modules/fields/checkbox-radio.ts

@@ -31,6 +31,14 @@ function getMinMaxRule(getRule: (rule: string) => unknown): { min: number | null
     };
 }
 
+function getSelectedOptionCount(field: HTMLElement): number {
+    return Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement && !isToggleCheckbox(input);
+    }).filter((input) => {
+        return input.checked;
+    }).length;
+}
+
 function registerValidators(form: HTMLFormElement | null): void {
     // Several checkbox/radio module instances can exist in one form, but the
     // custom validator should only be registered once per form lifecycle.
@@ -42,12 +50,7 @@ function registerValidators(form: HTMLFormElement | null): void {
                 return true;
             }
 
-            const inputs = Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
-                return input instanceof HTMLInputElement && !isToggleCheckbox(input);
-            });
-            const selected = inputs.filter((input) => {
-                return input.checked;
-            }).length;
+            const selected = getSelectedOptionCount(field);
             const { min, max } = getMinMaxRule(getRule);
 
             if (min !== null && selected < min) {
@@ -61,21 +64,24 @@ function registerValidators(form: HTMLFormElement | null): void {
             return true;
         },
         ({ field, label, t, getRule }) => {
-            const { min, max } = field ? getMinMaxRule(getRule) : { min: null, max: null };
-
-            if (min !== null && max !== null) {
-                return t('{attribute} must select between {min} and {max}.', { attribute: label, min, max });
+            if (!field) {
+                return t('{label} has an invalid value.', { label });
             }
 
-            if (min !== null) {
-                return t('{attribute} must select no less than {min}.', { attribute: label, min });
+            const selected = getSelectedOptionCount(field);
+            const { min, max } = getMinMaxRule(getRule);
+
+            if (min !== null && selected < min) {
+                return field.getAttribute('data-formie-validation-min-options-message')
+                    ?? t('{label} should contain at least {min, number} {min, plural, one{option} other{options}}.', { label, min });
             }
 
-            if (max !== null) {
-                return t('{attribute} must select no greater than {max}.', { attribute: label, max });
+            if (max !== null && selected > max) {
+                return field.getAttribute('data-formie-validation-max-options-message')
+                    ?? t('{label} should contain at most {max, number} {max, plural, one{option} other{options}}.', { label, max });
             }
 
-            return t('{attribute} has an invalid value.', { attribute: label });
+            return t('{label} has an invalid value.', { label });
         },
     );
     });

package/src/js/modules/fields/file-upload.ts

@@ -239,9 +239,10 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return input.files.length <= limit;
         }, ({ input, t }) => {
-            return t('Choose up to {files} files.', {
-                files: input.getAttribute('data-formie-file-limit') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-files-message')
+                ?? t('Choose up to {files} files.', {
+                    files: input.getAttribute('data-formie-file-limit') || '',
+                });
         });
 
         validator.addValidator('fileSizeMinLimit', ({ input }) => {
@@ -256,9 +257,10 @@ function registerValidators(form: HTMLFormElement | null): void {
                 return file.size >= sizeBytes;
             });
         }, ({ input, t }) => {
-            return t('File must be larger than {filesize} MB.', {
-                filesize: input.getAttribute('data-formie-size-min-limit') || '',
-            });
+            return input.getAttribute('data-formie-validation-min-file-size-message')
+                ?? t('File must be larger than {filesize} MB.', {
+                    filesize: input.getAttribute('data-formie-size-min-limit') || '',
+                });
         });
 
         validator.addValidator('fileSizeMaxLimit', ({ input }) => {
@@ -273,9 +275,10 @@ function registerValidators(form: HTMLFormElement | null): void {
                 return file.size <= sizeBytes;
             });
         }, ({ input, t }) => {
-            return t('File must be smaller than {filesize} MB.', {
-                filesize: input.getAttribute('data-formie-size-max-limit') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-file-size-message')
+                ?? t('File must be smaller than {filesize} MB.', {
+                    filesize: input.getAttribute('data-formie-size-max-limit') || '',
+                });
         });
     });
 }

package/src/js/modules/fields/text-limit.ts

@@ -5,6 +5,7 @@ import { getTextLimitMetrics } from '@verbb/formie-core';
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { t } from '#utils/i18n';
 
 const INPUT_SELECTOR = 'input[data-formie-single-line-text-input], textarea[data-formie-multi-line-text-input]';
 const TEXT_LIMIT_VALIDATORS = [
@@ -15,8 +16,17 @@ const TEXT_LIMIT_VALIDATORS = [
 ] as const;
 const VALIDATOR_SCOPE = 'text-limit';
 const ALLOW_OVERTYPE_ATTR = 'data-formie-text-limit-allow-overtype';
+const TEXT_LIMIT_CHARACTERS_ALLOWED = '{count, plural, one{character allowed} other{characters allowed}}';
+const TEXT_LIMIT_CHARACTERS_LEFT = '{count, plural, one{character left} other{characters left}}';
+const TEXT_LIMIT_CHARACTERS_OVER = '{count, plural, one{character over limit} other{characters over limit}}';
+const TEXT_LIMIT_WORDS_ALLOWED = '{count, plural, one{word allowed} other{words allowed}}';
+const TEXT_LIMIT_WORDS_LEFT = '{count, plural, one{word left} other{words left}}';
+const TEXT_LIMIT_WORDS_OVER = '{count, plural, one{word over limit} other{words over limit}}';
 const limitTargetCache = new WeakMap<HTMLInputElement | HTMLTextAreaElement, HTMLElement | null>();
 
+type TextLimitUnit = 'character' | 'word';
+type TextLimitCounterState = 'allowed' | 'left' | 'over';
+
 ensureModuleStyles('text-limit', [textLimitCss]);
 
 type TextLimitOptions = {
@@ -69,10 +79,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).graphemeCount >= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no less than {min} characters.', {
-                attribute: label,
-                min: input.getAttribute('data-formie-min-chars') || '',
-            });
+            return input.getAttribute('data-formie-validation-min-characters-message')
+                || t('{label} must be no less than {min} characters.', {
+                    label,
+                    min: input.getAttribute('data-formie-min-chars') || '',
+                });
         });
 
         validator.addValidator('textMaxCharacterLimit', ({ input }) => {
@@ -92,10 +103,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).graphemeCount <= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no greater than {max} characters.', {
-                attribute: label,
-                max: input.getAttribute('data-formie-max-chars') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-characters-message')
+                || t('{label} must be no greater than {max} characters.', {
+                    label,
+                    max: input.getAttribute('data-formie-max-chars') || '',
+                });
         });
 
         validator.addValidator('textMinWordLimit', ({ input }) => {
@@ -111,10 +123,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).wordCount >= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no less than {min} words.', {
-                attribute: label,
-                min: input.getAttribute('data-formie-min-words') || '',
-            });
+            return input.getAttribute('data-formie-validation-min-words-message')
+                || t('{label} must be no less than {min} words.', {
+                    label,
+                    min: input.getAttribute('data-formie-min-words') || '',
+                });
         });
 
         validator.addValidator('textMaxWordLimit', ({ input }) => {
@@ -134,10 +147,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).wordCount <= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no greater than {max} words.', {
-                attribute: label,
-                max: input.getAttribute('data-formie-max-words') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-words-message')
+                || t('{label} must be no greater than {max} words.', {
+                    label,
+                    max: input.getAttribute('data-formie-max-words') || '',
+                });
         });
     });
 }
@@ -182,14 +196,65 @@ function getLimitTarget(input: HTMLInputElement | HTMLTextAreaElement): HTMLElem
     return target;
 }
 
-function renderCounter(target: HTMLElement, remaining: number, unit: 'character' | 'word'): void {
+function getTextLimitCounterState(
+    input: HTMLInputElement | HTMLTextAreaElement,
+    remaining: number,
+    unit: TextLimitUnit,
+): TextLimitCounterState {
+    const isEmpty = unit === 'character' ? input.value === '' : input.value.trim() === '';
+
+    if (isEmpty) {
+        return 'allowed';
+    }
+
+    if (remaining < 0) {
+        return 'over';
+    }
+
+    return 'left';
+}
+
+function getTextLimitCounterMessageKey(unit: TextLimitUnit, state: TextLimitCounterState): string {
+    if (unit === 'character') {
+        if (state === 'allowed') {
+            return TEXT_LIMIT_CHARACTERS_ALLOWED;
+        }
+
+        if (state === 'over') {
+            return TEXT_LIMIT_CHARACTERS_OVER;
+        }
+
+        return TEXT_LIMIT_CHARACTERS_LEFT;
+    }
+
+    if (state === 'allowed') {
+        return TEXT_LIMIT_WORDS_ALLOWED;
+    }
+
+    if (state === 'over') {
+        return TEXT_LIMIT_WORDS_OVER;
+    }
+
+    return TEXT_LIMIT_WORDS_LEFT;
+}
+
+function renderCounter(
+    target: HTMLElement,
+    input: HTMLInputElement | HTMLTextAreaElement,
+    remaining: number,
+    limit: number,
+    unit: TextLimitUnit,
+): void {
+    const state = getTextLimitCounterState(input, remaining, unit);
+    const displayCount = state === 'allowed' ? limit : Math.abs(remaining);
     const number = document.createElement('span');
-    number.className = remaining < 0 ? 'formie-limit-number formie-limit-number-error' : 'formie-limit-number';
-    number.textContent = String(remaining);
+    number.className = state === 'over' ? 'formie-limit-number formie-limit-number-error' : 'formie-limit-number';
+    number.textContent = String(displayCount);
+    const messageKey = getTextLimitCounterMessageKey(unit, state);
 
     target.replaceChildren(
         number,
-        document.createTextNode(` ${Math.abs(remaining) === 1 ? unit : `${unit}s`} left`)
+        document.createTextNode(` ${t(messageKey, { count: displayCount })}`)
     );
 }
 
@@ -206,14 +271,14 @@ function updateCounter(input: HTMLInputElement | HTMLTextAreaElement): void {
 
     if (maxChars > 0) {
         const remaining = maxChars - metrics.graphemeCount;
-        renderCounter(target, remaining, 'character');
+        renderCounter(target, input, remaining, maxChars, 'character');
 
         return;
     }
 
     if (maxWords > 0) {
         const remaining = maxWords - metrics.wordCount;
-        renderCounter(target, remaining, 'word');
+        renderCounter(target, input, remaining, maxWords, 'word');
     }
 }
 

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 });
     },
 };