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/tests/util.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { deepEqual } from '../util';
+import { combinePatterns, deepEqual } from '../util';
 
 test('deepEqual', () => {
 	expect(deepEqual(null, null)).toBe(true);
@@ -22,3 +22,21 @@ test('deepEqual', () => {
 		false,
 	);
 });
+
+test('combinePatterns', () => {
+	// Empty pattern
+	expect(combinePatterns([])).toBeUndefined();
+
+	// Single pattern
+	expect(combinePatterns([/[A-Z]/])).toBe('^(?=.*(?:[A-Z])).*$');
+	expect(combinePatterns([/^[A-Z]+$/])).toBe('^(?=.*(?:^[A-Z]+$)).*$');
+
+	// Multiple patterns without flags
+	expect(combinePatterns([/[A-Z]/, /[0-9]/])).toBe(
+		'^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$',
+	);
+
+	// Patterns with unsupported flags
+	expect(combinePatterns([/[A-Z]/g])).toBeUndefined();
+	expect(combinePatterns([/[A-Z]/, /[0-9]/i])).toBeUndefined();
+});

packages/conform-dom/util.ts

@@ -113,3 +113,25 @@ export function getTypeName(value: unknown): string {
 	}
 	return typeof value;
 }
+
+/**
+ * Combines multiple regex patterns into a single HTML pattern attribute string.
+ *
+ * For multiple patterns, combines them using lookahead assertions that must all match.
+ *
+ * Returns undefined if any pattern has flags, since HTML5 pattern attributes don't support flags.
+ * HTML pattern attributes implicitly run with the `v` flag, so we strip it (and `u`).
+ *
+ * Example: [/[A-Z]/, /[0-9]/] -> '^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$'
+ */
+export function combinePatterns(patterns: RegExp[]): string | undefined {
+	if (patterns.length === 0) {
+		return undefined;
+	}
+
+	if (patterns.some((p) => p.flags.replace(/[uv]/g, ''))) {
+		return undefined;
+	}
+
+	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,22 @@ 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) {
+				const pattern = combinePatterns(
+					regexValidators.map(
+						// @ts-expect-error
+						(v) => (v as { requirement: RegExp }).requirement,
+					),
+				);
+				if (pattern) {
+					constraint.pattern = pattern;
+				}
+			}
 		} 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,38 @@ 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'),
+			),
+		});
+
+		const constraint = getValibotConstraint(schema);
+
+		expect(constraint.empty?.required).toBe(true);
+		expect(constraint.singlePattern?.required).toBe(true);
+		expect(constraint.multiplePatterns?.required).toBe(true);
+
+		expect(constraint.singlePattern?.pattern).toBe('^(?=.*(?:^[A-Z]+$)).*$');
+		expect(constraint.multiplePatterns?.pattern).toBe(
+			'^(?=.*(?:[A-Z]))(?=.*(?:[0-9])).*$',
+		);
+
+		const singleRegex = new RegExp(constraint.singlePattern?.pattern ?? '');
+		expect(singleRegex.test('ABC')).toBe(true);
+		expect(singleRegex.test('abc')).toBe(false);
+		expect(singleRegex.test('ABC123')).toBe(false);
+
+		const multiRegex = new RegExp(constraint.multiplePatterns?.pattern ?? '');
+		expect(multiRegex.test('ABC')).toBe(false);
+		expect(multiRegex.test('123')).toBe(false);
+		expect(multiRegex.test('ABC123')).toBe(true);
+		expect(multiRegex.test('abc123')).toBe(false);
+	});
 });

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,16 @@ 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) {
+				const pattern = combinePatterns(regexChecks.map((c) => c.regex));
+				if (pattern) {
+					constraint.pattern = pattern;
+				}
+			}
 		} 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,12 @@ 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) {
+				const pattern = combinePatterns([..._schema._zod.bag.patterns]);
+				if (pattern) {
+					constraint.pattern = pattern;
+				}
+			}
 		} 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])).*$',
+			},
+		});
+	});
 });