Merge pull request #31 from bholmesdev/fix/async-validation-on-submit

Fix: client-side async validation still submits on error
bholmesdev · Jan 10, 2024 · 53a6059 · 53a6059
2 parents 791a262 + 0d489e5
commit 53a6059
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 19 deletions.
diff --git a/.changeset/tasty-ears-do.md b/.changeset/tasty-ears-do.md
@@ -0,0 +1,5 @@
+---
+"simple-stack-form": patch
+---
+
+Async validation would cause the form to submit even when form errors are present. This fix updates all form templates to call Astro's submit method manually.
diff --git a/examples/playground/src/components/preact/Form.tsx b/examples/playground/src/components/preact/Form.tsx
@@ -2,18 +2,19 @@
 
 // Generated by simple:form
 
+import { navigate } from "astro:transitions/client";
 import { type ComponentProps, createContext } from "preact";
 import { useContext, useState } from "preact/hooks";
 import {
 	type FieldErrors,
 	type FormState,
 	type FormValidator,
+	formNameInputProps,
 	getInitialFormState,
 	toSetValidationErrors,
 	toTrackAstroSubmitStatus,
 	toValidateField,
 	validateForm,
-	formNameInputProps,
 } from "simple:form";
 
 export function useCreateFormContext(
@@ -65,6 +66,8 @@ export function Form({
 				{...formProps}
 				method="POST"
 				onSubmit={async (e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					const formData = new FormData(e.currentTarget);
 					formContext.set((formState) => ({
 						...formState,
@@ -73,11 +76,15 @@ export function Form({
 					}));
 					const parsed = await validateForm({ formData, validator });
 					if (parsed.data) {
+						const action =
+							typeof formProps.action === "string"
+								? formProps.action
+								: // Check for Preact signals
+								  formProps.action?.value ?? "";
+						navigate(action, { formData });
 						return formContext.trackAstroSubmitStatus();
 					}
 
-					e.preventDefault();
-					e.stopPropagation();
 					formContext.setValidationErrors(parsed.fieldErrors);
 				}}
 			>

diff --git a/examples/playground/src/components/react/Form.tsx b/examples/playground/src/components/react/Form.tsx
@@ -1,5 +1,6 @@
 // Generated by simple:form
 
+import { navigate } from "astro:transitions/client";
 import {
 	type ComponentProps,
 	createContext,
@@ -10,12 +11,12 @@ import {
 	type FieldErrors,
 	type FormState,
 	type FormValidator,
+	formNameInputProps,
 	getInitialFormState,
 	toSetValidationErrors,
 	toTrackAstroSubmitStatus,
 	toValidateField,
 	validateForm,
-	formNameInputProps,
 } from "simple:form";
 
 export function useCreateFormContext(
@@ -67,6 +68,8 @@ export function Form({
 				{...formProps}
 				method="POST"
 				onSubmit={async (e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					const formData = new FormData(e.currentTarget);
 					formContext.set((formState) => ({
 						...formState,
@@ -75,11 +78,10 @@ export function Form({
 					}));
 					const parsed = await validateForm({ formData, validator });
 					if (parsed.data) {
+						navigate(formProps.action ?? "", { formData });
 						return formContext.trackAstroSubmitStatus();
 					}
 
-					e.preventDefault();
-					e.stopPropagation();
 					formContext.setValidationErrors(parsed.fieldErrors);
 				}}
 			>

diff --git a/examples/playground/src/components/solid-js/Form.tsx b/examples/playground/src/components/solid-js/Form.tsx
@@ -3,24 +3,25 @@
 // Generated by simple:form
 
 import {
-	createSignal,
-	createContext,
-	useContext,
 	type ComponentProps,
-	Show,
 	For,
+	Show,
+	createContext,
+	createSignal,
+	useContext,
 } from "solid-js";
 import {
 	type FieldErrors,
 	type FormState,
 	type FormValidator,
+	formNameInputProps,
 	getInitialFormState,
 	toSetValidationErrors,
 	toTrackAstroSubmitStatus,
 	toValidateField,
 	validateForm,
-	formNameInputProps,
 } from "simple:form";
+import { navigate } from "astro:transitions/client";
 
 export function useCreateFormContext(
 	validator: FormValidator,
@@ -67,6 +68,8 @@ export function Form(
 				{...props}
 				method="post"
 				onSubmit={async (e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					const formData = new FormData(e.currentTarget);
 					formContext.set((formState) => ({
 						...formState,
@@ -78,11 +81,10 @@ export function Form(
 						validator: props.validator,
 					});
 					if (parsed.data) {
+						navigate(props.action?.toString() ?? "", { formData });
 						return formContext.trackAstroSubmitStatus();
 					}
 
-					e.preventDefault();
-					e.stopPropagation();
 					formContext.setValidationErrors(parsed.fieldErrors);
 				}}
 			>

diff --git a/packages/form/templates/preact/Form.tsx b/packages/form/templates/preact/Form.tsx
@@ -2,6 +2,7 @@
 
 import { type ComponentProps, createContext } from "preact";
 import { useContext, useState } from "preact/hooks";
+import { navigate } from "astro:transitions/client";
 import {
 	type FieldErrors,
 	type FormState,
@@ -63,6 +64,8 @@ export function Form({
 				{...formProps}
 				method="POST"
 				onSubmit={async (e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					const formData = new FormData(e.currentTarget);
 					formContext.set((formState) => ({
 						...formState,
@@ -71,11 +74,15 @@ export function Form({
 					}));
 					const parsed = await validateForm({ formData, validator });
 					if (parsed.data) {
+						const action =
+							typeof formProps.action === "string"
+								? formProps.action
+								: // Check for Preact signals
+								  formProps.action?.value ?? "";
+						navigate(action, { formData });
 						return formContext.trackAstroSubmitStatus();
 					}
 
-					e.preventDefault();
-					e.stopPropagation();
 					formContext.setValidationErrors(parsed.fieldErrors);
 				}}
 			>

diff --git a/packages/form/templates/preact/env.d.ts b/packages/form/templates/preact/env.d.ts
@@ -1 +1,2 @@
 /// <reference path="../../types.d.ts" />
+/// <reference types="astro/client" />
diff --git a/packages/form/templates/react/Form.tsx b/packages/form/templates/react/Form.tsx
@@ -6,6 +6,7 @@ import {
 	useContext,
 	useState,
 } from "react";
+import { navigate } from "astro:transitions/client";
 import {
 	type FieldErrors,
 	type FormState,
@@ -67,6 +68,8 @@ export function Form({
 				{...formProps}
 				method="POST"
 				onSubmit={async (e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					const formData = new FormData(e.currentTarget);
 					formContext.set((formState) => ({
 						...formState,
@@ -75,11 +78,10 @@ export function Form({
 					}));
 					const parsed = await validateForm({ formData, validator });
 					if (parsed.data) {
+						navigate(formProps.action ?? "", { formData });
 						return formContext.trackAstroSubmitStatus();
 					}
 
-					e.preventDefault();
-					e.stopPropagation();
 					formContext.setValidationErrors(parsed.fieldErrors);
 				}}
 			>

diff --git a/packages/form/templates/react/env.d.ts b/packages/form/templates/react/env.d.ts
@@ -1 +1,2 @@
 /// <reference path="../../types.d.ts" />
+/// <reference types="astro/client" />
diff --git a/packages/form/templates/solid-js/Form.tsx b/packages/form/templates/solid-js/Form.tsx
@@ -8,6 +8,7 @@ import {
 	createSignal,
 	useContext,
 } from "solid-js";
+import { navigate } from "astro:transitions/client";
 import {
 	type FieldErrors,
 	type FormState,
@@ -65,6 +66,8 @@ export function Form(
 				{...props}
 				method="post"
 				onSubmit={async (e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					const formData = new FormData(e.currentTarget);
 					formContext.set((formState) => ({
 						...formState,
@@ -76,11 +79,10 @@ export function Form(
 						validator: props.validator,
 					});
 					if (parsed.data) {
+						navigate(props.action?.toString() ?? "", { formData });
 						return formContext.trackAstroSubmitStatus();
 					}
 
-					e.preventDefault();
-					e.stopPropagation();
 					formContext.setValidationErrors(parsed.fieldErrors);
 				}}
 			>

diff --git a/packages/form/templates/solid-js/env.d.ts b/packages/form/templates/solid-js/env.d.ts
@@ -1 +1,2 @@
 /// <reference path="../../types.d.ts" />
+/// <reference types="astro/client" />