feat: allow multiple fields to be validated in one intent

.changeset/stupid-needles-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@conform-to/dom': minor
+---
+
+Allow validating multiple fields in one validate intent

packages/conform-dom/form.ts

@@ -332,7 +332,13 @@ function handleIntent<Error>(
 	switch (intent.type) {
 		case 'validate': {
 			if (intent.payload.name) {
-				meta.validated[intent.payload.name] = true;
+				if (typeof intent.payload.name === 'string') {
+					meta.validated[intent.payload.name] = true;
+				} else {
+					for (const name of intent.payload.name) {
+						meta.validated[name] = true;
+					}
+				}
 			} else {
 				setFieldsValidated(meta, fields);
 			}

packages/conform-dom/submission.ts

@@ -303,7 +303,7 @@ export function replySubmission<FormError>(
 export type ValidateIntent<Schema = any> = {
 	type: 'validate';
 	payload: {
-		name?: FieldName<Schema>;
+		name?: FieldName<Schema> | FieldName<Schema>[];
 	};
 };
 

playground/app/routes/form-control.tsx

@@ -73,6 +73,14 @@ export default function FormControl() {
 						>
 							Validate Message
 						</button>
+						<button
+							className="rounded-md border p-2 hover:border-black"
+							{...form.validate.getButtonProps({
+								name: [fields.name.name, fields.message.name],
+							})}
+						>
+							Validate Name And Message
+						</button>
 						<button
 							className="rounded-md border p-2 hover:border-black"
 							{...form.update.getButtonProps({

tests/integrations/form-control.spec.ts

@@ -8,6 +8,9 @@ function getFieldset(form: Locator) {
 		number: form.locator('[name="number"]'),
 		validateForm: form.locator('button:text("Validate Form")'),
 		validateMessage: form.locator('button:text("Validate Message")'),
+		validateNameAndMessage: form.locator(
+			'button:text("Validate Name And Message")',
+		),
 		updateMessage: form.locator('button:text("Update message")'),
 		updateNumber: form.locator('button:text("Update number")'),
 		updateForm: form.locator('button:text("Update form")'),
@@ -57,6 +60,19 @@ async function runValidationScenario(page: Page) {
 	await expect(fieldset.message).toHaveValue('');
 	await expect(playground.error).toHaveText(['', '', '']);
 
+	await fieldset.validateNameAndMessage.click();
+	await expect(playground.error).toHaveText([
+		'Name is required',
+		'Message is required',
+		'',
+	]);
+
+	await fieldset.resetForm.click();
+	await expect(fieldset.name).toHaveValue('');
+	await expect(fieldset.number).toHaveValue('');
+	await expect(fieldset.message).toHaveValue('');
+	await expect(playground.error).toHaveText(['', '', '']);
+
 	await fieldset.updateForm.click();
 	await expect(fieldset.name).toHaveValue('Conform');
 	await expect(fieldset.number).toHaveValue('13579');