zod and form actions for demo app

Author: Tommertom

demo-app/src/routes/components/Inputs/+page.svelte

@@ -46,7 +46,7 @@
 </script>
 
 <svelte:head>
-	<title>Ionic Companion - Inputs</title>
+	<title>Ionic Companion - Inputs - with Form Actions and zod</title>
 </svelte:head>
 
 <IonPage>

demo-app/src/routes/components/Select/+page.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <svelte:head>
-	<title>Ionic Companion - Select</title>
+	<title>Ionic Companion - Select - with Form Actions and zod</title>
 </svelte:head>
 
 <IonPage>

demo-app/static/assets/src/components/Inputs/+page.server.ts

@@ -1,26 +1,46 @@
 import type { PageServerLoad } from './$types';
 import type { Actions } from './$types';
 
+import { accountSchema } from './account.interface';
+
 export const load = (async () => {
     return {};
 }) satisfies PageServerLoad;
 
 export const actions = {
     default: async ({ request }) => {
-        const formData = Object.fromEntries(await request.formData())
 
-        const success = Math.random() > 0.3;
-        const errors = {};
-        Object.keys(formData).forEach(key => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
-            errors[key] = Math.random() > 0.3;
-        })
+        let success = true;
+        let errors = {};
+
+        const formBody = await request.formData();
+        let formAsObject = Object.fromEntries(formBody);
+
+        const result = accountSchema.safeParse(formAsObject)
+        console.log('newAccountSchema.safeParse result', formAsObject, result);
+        if (!result.success) {
+            /* 
+            Taken from - https://www.okupter.com/blog/sveltekit-form-validation-with-zod
 
-        console.log('Logging to vite window', formData, errors, success)
+            Errors will be placed in an array of:
+            {field:'name', message:'the message'}
+            */
+            errors = result.error.errors.map((error) => {
+                return {
+                    field: error.path[0],
+                    message: error.message
+                };
+            });
+            console.log('newAccountSchema.safeParse errors', errors);
+            success = false;
+        }
 
+        if (result.success) {
+            formAsObject = result.data;
+        }
 
-        return { success, errors, formData }
+        console.log('Logging to vite window', formAsObject, errors, success)
+        return { success, errors, formData: formAsObject }
     }
 
 } satisfies Actions

demo-app/static/assets/src/components/Inputs/+page.svelte

@@ -1,34 +1,52 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { applyAction, enhance, type SubmitFunction } from '$app/forms';
 	import { page } from '$app/stores';
 	import SourceButton from '$lib/components/SourceButton.svelte';
 	import { alertController, IonPage } from 'ionic-svelte';
 	import type { ActionData } from './$types';
 
+	const patchForm: SubmitFunction = () => {
+		return async ({ result }) => {
+			await applyAction(result);
+		};
+	};
+
 	export let form: ActionData;
 
 	$: console.log('Form received', form);
 	$: console.log('Page form', $page.form);
 
-	// $: if (form?.success) {
-	// 	console.log('Processing form', form);
-	// 	// event.preventDefault();
-	// 	const controller = alertController
-	// 		.create({
-	// 			header: 'Account Created',
-	// 			message: `Created account for: <b>${form.formData.firstName} ${form.formData.lastName}</b>`,
-	// 			buttons: [
-	// 				{
-	// 					text: 'OK'
-	// 				}
-	// 			]
-	// 		})
-	// 		.then((alert) => alert.present());
-	// }
+	$: if (form?.success) {
+		const controller = alertController
+			.create({
+				header: 'Account Created',
+				message: `Created account for: <b>${form.formData.firstName} ${form.formData.lastName}</b>`,
+				buttons: [
+					{
+						text: 'OK'
+					}
+				]
+			})
+			.then((alert) => alert.present());
+	}
+
+	$: if (form !== null && !form?.success) {
+		const controller = alertController
+			.create({
+				header: 'Account Not Created',
+				message: `There were some errors - see console.log`,
+				buttons: [
+					{
+						text: 'OK'
+					}
+				]
+			})
+			.then((alert) => alert.present());
+	}
 </script>
 
 <svelte:head>
-	<title>Ionic Companion - Inputs</title>
+	<title>Ionic Companion - Inputs - with Form Actions and zod</title>
 </svelte:head>
 
 <IonPage>
@@ -45,14 +63,14 @@
 	</ion-header>
 
 	<ion-content fullscreen class="ion-padding">
-		<form method="POST" use:enhance>
+		<form method="POST" use:enhance={patchForm}>
 			<ion-list lines="full" class="ion-no-margin ion-no-padding">
 				<ion-item>
 					<ion-label position="stacked">
 						First Name
 						<ion-text color="danger">*</ion-text>
 					</ion-label>
-					<ion-input name="firstName" type="text" value={form?.formData.firstName ?? ''} />
+					<ion-input name="firstName" type="text" value={form?.formData?.firstName ?? ''} />
 				</ion-item>
 
 				<ion-item>

demo-app/static/assets/src/components/Inputs/account.interface.ts

@@ -0,0 +1,11 @@
+// https://zod.dev/
+// https://morioh.com/p/cc9d89e8a10b
+import { z } from 'zod';
+
+export const accountSchema = z.object({
+    firstName: z.string().trim().min(3, { message: "first_name_too_short" }),
+    lastName: z.string().trim().min(5, { message: "last_name_too_short" })
+});
+
+// not used
+export type Account = z.infer<typeof accountSchema>; 

demo-app/static/assets/src/components/Select/+page.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { applyAction, enhance, type SubmitFunction } from '$app/forms';
 	import { page } from '$app/stores';
 	import SourceButton from '$lib/components/SourceButton.svelte';
 	import { IonPage } from 'ionic-svelte';
 	import type { ActionData } from '../Inputs/$types';
 
+	const patchForm: SubmitFunction = () => {
+		return async ({ result }) => {
+			await applyAction(result);
+		};
+	};
+
 	export let form: ActionData;
 
 	$: console.log('Form received', form);
 	$: console.log('Page form', $page.form);
 </script>
 
 <svelte:head>
-	<title>Ionic Companion - Select</title>
+	<title>Ionic Companion - Select - with Form Actions and zod</title>
 </svelte:head>
 
 <IonPage>
@@ -29,7 +35,7 @@
 	</ion-header>
 
 	<ion-content fullscreen>
-		<form method="POST" action="/components/Inputs" use:enhance>
+		<form method="POST" action="/components/Inputs" use:enhance={patchForm}>
 			<ion-list>
 				<ion-item>
 					<ion-label>Pet</ion-label>