feat: set pattern constraint for regular expressions

Author: transparent-citizen

.changeset/pattern-constraint-regex.md

@@ -0,0 +1,41 @@
+---
+'@conform-to/dom': minor
+'@conform-to/react': minor
+'@conform-to/valibot': minor
+'@conform-to/zod': minor
+---
+
+Mapped regex constraints to `pattern`, enabling advanced client-side validation.
+
+```tsx
+import { configureForms } from '@conform-to/react/future';
+import { getConstraints } from '@conform-to/zod/v4/future';
+import type { InputHTMLAttributes } from 'react';
+import { z } from 'zod';
+
+const schema = z.object({
+  password: z
+    .string()
+    .min(8)
+    .regex(/[A-Z]/, 'uppercase')
+    .regex(/[0-9]/, 'digit')
+    .regex(/[!@#$%^&*]/, 'special'),
+});
+
+const configuredForms = configureForms({
+  extendFieldMetadata(metadata) {
+    return {
+      get inputProps() {
+        return {
+          // '^(?=.*(?:[A-Z]))(?=.*(?:[0-9]))(?=.*(?:[!@#$%^&*])).*$'
+          pattern: metadata.pattern,
+          minLength: metadata.minLength,
+          name: metadata.name,
+          required: metadata.required,
+        } satisfies InputHTMLAttributes<HTMLInputElement>;
+      },
+    };
+  },
+  getConstraints,
+});
+```

packages/conform-dom/future/index.ts

@@ -25,7 +25,7 @@ export {
 	getFieldValue,
 	normalizeFormError,
 } from '../formdata';
-export { isPlainObject, deepEqual } from '../util';
+export { isPlainObject, deepEqual, combinePatterns } from '../util';
 export {
 	isFieldElement,
 	isGlobalInstance,

packages/conform-dom/util.ts

@@ -113,3 +113,18 @@ export function getTypeName(value: unknown): string {
 	}
 	return typeof value;
 }
+
+/**
+ * Combines multiple regex patterns into a single HTML pattern attribute string.
+ * For a single pattern, returns the pattern source as-is.
+ * For multiple patterns, combines them using lookahead assertions that must ALL match.
+ *
+ * Example: ['[A-Z]', '[0-9]'] -> '^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$'
+ */
+export function combinePatterns(patterns: RegExp[]): string {
+	if (patterns.length === 0) {
+		return '';
+	}
+
+	return `^${patterns.map((p) => `(?=.*(?:${p.source}))`).join('')}.*$`;
+}

packages/conform-valibot/constraint.ts

@@ -1,5 +1,6 @@
 import type { Constraint } from '@conform-to/dom';
 import { getPaths, formatPaths, getRelativePath } from '@conform-to/dom';
+import { combinePatterns } from '@conform-to/dom/future';
 import type { GenericSchema, GenericSchemaAsync } from 'valibot';
 
 const keys: Array<keyof Constraint> = [
@@ -149,6 +150,19 @@ export function getValibotConstraint<
 			if (maxLength && 'requirement' in maxLength) {
 				constraint.maxLength = maxLength.requirement as number;
 			}
+			// @ts-expect-error
+			const regexValidators = schema.pipe?.filter(
+				// @ts-expect-error
+				(v) => 'type' in v && v.type === 'regex',
+			);
+			if (regexValidators?.length) {
+				constraint.pattern = combinePatterns(
+					regexValidators.map(
+						// @ts-expect-error
+						(v) => (v as { requirement: RegExp }).requirement,
+					),
+				);
+			}
 		} else if (
 			schema.type === 'optional' ||
 			schema.type === 'nullish' ||

packages/conform-valibot/tests/constraint.test.ts

@@ -24,6 +24,7 @@ import {
 	objectWithRest,
 	optional,
 	pipe,
+	regex,
 	strictObject,
 	string,
 	tuple,
@@ -374,4 +375,30 @@ describe('constraint', () => {
 			constraint['conditions[0].conditions[1].conditions[2].type'],
 		).toEqual({ required: true });
 	});
+
+	test('regex patterns', () => {
+		const schema = object({
+			empty: string(),
+			singlePattern: pipe(string(), regex(/^[A-Z]+$/)),
+			multiplePatterns: pipe(
+				string(),
+				regex(/[A-Z]/, 'uppercase'),
+				regex(/[0-9]/, 'digit'),
+			),
+		});
+
+		expect(getValibotConstraint(schema)).toEqual({
+			empty: {
+				required: true,
+			},
+			singlePattern: {
+				required: true,
+				pattern: '^(?=.*(?:^[A-Z]+$)).*$',
+			},
+			multiplePatterns: {
+				required: true,
+				pattern: '^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$',
+			},
+		});
+	});
 });

packages/conform-zod/default/constraint.ts

@@ -1,10 +1,12 @@
 import type { Constraint } from '@conform-to/dom';
 import { getPaths, formatPaths, getRelativePath } from '@conform-to/dom';
+import { combinePatterns } from '@conform-to/dom/future';
 import type {
 	ZodTypeAny,
 	ZodFirstPartySchemaTypes,
 	ZodNumber,
 	ZodString,
+	ZodStringCheck,
 } from 'zod';
 
 const keys: Array<keyof Constraint> = [
@@ -129,6 +131,13 @@ export function getZodConstraint(
 			if (_schema.maxLength !== null) {
 				constraint.maxLength = _schema.maxLength;
 			}
+			const regexChecks = def.checks.filter(
+				(check): check is ZodStringCheck & { kind: 'regex' } =>
+					check.kind === 'regex',
+			);
+			if (regexChecks.length > 0) {
+				constraint.pattern = combinePatterns(regexChecks.map((c) => c.regex));
+			}
 		} else if (def.typeName === 'ZodOptional') {
 			constraint.required = false;
 			updateConstraint(def.innerType, data, name);

packages/conform-zod/default/tests/constraint.test.ts

@@ -360,4 +360,29 @@ describe('getZodConstraint', () => {
 			constraint['conditions[0].conditions[1].conditions[2].type'],
 		).toEqual({ required: true });
 	});
+
+	test('regex patterns', () => {
+		const schema = z.object({
+			empty: z.string(),
+			singlePattern: z.string().regex(/^[A-Z]+$/),
+			multiplePatterns: z
+				.string()
+				.regex(/[A-Z]/, 'uppercase')
+				.regex(/[0-9]/, 'digit'),
+		});
+
+		expect(getZodConstraint(schema)).toEqual({
+			empty: {
+				required: true,
+			},
+			singlePattern: {
+				required: true,
+				pattern: '^(?=.*(?:^[A-Z]+$)).*$',
+			},
+			multiplePatterns: {
+				required: true,
+				pattern: '^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$',
+			},
+		});
+	});
 });

packages/conform-zod/v4/constraint.ts

@@ -1,5 +1,6 @@
 import type { Constraint } from '@conform-to/dom';
 import { getPaths, formatPaths, getRelativePath } from '@conform-to/dom';
+import { combinePatterns } from '@conform-to/dom/future';
 import {
 	$ZodType,
 	$ZodTypes,
@@ -131,6 +132,9 @@ export function getZodConstraint(schema: $ZodType): Record<string, Constraint> {
 			if (_schema._zod.bag.maximum != null) {
 				constraint.maxLength = _schema._zod.bag.maximum;
 			}
+			if (_schema._zod.bag.patterns?.size) {
+				constraint.pattern = combinePatterns([..._schema._zod.bag.patterns]);
+			}
 		} else if (def.type === 'optional') {
 			constraint.required = false;
 			updateConstraint(def.innerType, data, name);

packages/conform-zod/v4/tests/constraint.test.ts

@@ -457,4 +457,29 @@ describe('getZodConstraint', () => {
 			required: true,
 		});
 	});
+
+	test('regex patterns', () => {
+		const schema = z.object({
+			empty: z.string(),
+			singlePattern: z.string().regex(/^[A-Z]+$/),
+			multiplePatterns: z
+				.string()
+				.regex(/[A-Z]/, 'uppercase')
+				.regex(/[0-9]/, 'digit'),
+		});
+
+		expect(getZodConstraint(schema)).toEqual({
+			empty: {
+				required: true,
+			},
+			singlePattern: {
+				required: true,
+				pattern: '^(?=.*(?:^[A-Z]+$)).*$',
+			},
+			multiplePatterns: {
+				required: true,
+				pattern: '^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$',
+			},
+		});
+	});
 });