Implementing Form Confirmation Dialog

[mehdikhody]

Hello Everyone,
I am currently working on a feature within my application that requires a two-step process for form submission. Specifically, after the user clicks the "Submit" button on the form:

1. If there are no validation errors:
   • Open a confirmation dialog to seek user confirmation.
   • Upon user confirmation, submit the form data to the server.
2. If there are validation errors:
   • Do not open the confirmation dialog.
   • Display the validation errors to the user.

Below is a snippet of my current code:

routes/setup/setup-schema.ts

import { z } from "zod";

export const setupSchema = z
  .object({
    username: z.string().min(3).max(20),
    password: z.string().min(3).max(100),
    confirmPassword: z.string().min(3).max(100),
  })
  .superRefine(({ password, confirmPassword }, ctx) => {
    if (password !== confirmPassword) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "Passwords do not match",
        path: ["confirmPassword"],
      });
    }
  });

export type SetupSchema = typeof setupSchema;

routes/setup/+page.server.ts

import type { Actions, PageServerLoad } from "./$types";
import { fail } from "@sveltejs/kit";
import { superValidate } from "sveltekit-superforms/client";
import { setupSchema } from "./setup-schema";

export const load: PageServerLoad = async () => {
  return {
    form: await superValidate(setupSchema),
  };
};

export const actions: Actions = {
  default: async (event) => {
    const form = await superValidate(event, setupSchema);
    if (!form.valid) return fail(400, { form });

    return { form };
  },
};

routes/setup/+page.svelte

<script lang="ts">
import type { SuperValidated } from "sveltekit-superforms";
import type { FormOptions } from "formsnap";
import type { SetupSchema } from "./schema";
import { goto } from "$app/navigation";
import { toast } from "svelte-sonner";
import { setupSchema } from "./schema";
import * as Form from "$lib/components/ui/form";
import * as AlertDialog from "$lib/components/ui/alert-dialog";

export let form: SuperValidated<SetupSchema>;

let formEl: HTMLFormElement;
let disableSubmit = false;
let showDialog = false;
let confirmed = false;

const options: FormOptions<SetupSchema> = {
  multipleSubmits: "prevent",
  onSubmit({ formData, cancel }) {
    const data = Object.fromEntries(formData);
    const result = setupSchema.safeParse(data);
    if (result.success && !confirmed) {
      cancel();
      showDialog = true;
    } else {
      confirmed = false;
    }
  },
  onResult({ result }) {
    if (result.type !== "success") {
      return;
    }

    toast.success("Setup complete!", {
      description: "You can now login with your admin account.",
    });

    disableSubmit = false;

    setTimeout(() => {
      goto("/", { invalidateAll: true });
    }, 2000);
  },
};
</script>

<Form.Root
  schema={setupSchema}
  {form}
  {options}
  let:config
  let:enhance
  asChild
>
	<form method="POST" class="space-y-2" use:enhance bind:this={formEl}>
		<Form.Field {config} name="username">
			<Form.Item>
				<Form.Label>Username</Form.Label>
				<Form.Input placeholder="admin username" />
				<Form.Validation />
			</Form.Item>
		</Form.Field>
		<Form.Field {config} name="password">
			<Form.Item>
				<Form.Label>Password</Form.Label>
				<Form.Input type="password" placeholder="••••••••••" />
				<Form.Validation />
			</Form.Item>
		</Form.Field>
		<Form.Field {config} name="confirmPassword">
			<Form.Item>
				<Form.Label>Confirm Password</Form.Label>
				<Form.Input type="password" placeholder="••••••••••" />
				<Form.Validation />
			</Form.Item>
		</Form.Field>
		<Form.Button class="w-full" disabled={disableSubmit}>
			Submit
		</Form.Button>
	</form>
</Form.Root>

<AlertDialog.Root bind:open={showDialog}>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
			<AlertDialog.Description>
				This action cannot be undone. This will permanently create the
				admin account and securely store the associated data on the
				server.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel
				on:click={() => {
					confirmed = false;
					formEl.reset();
				}}>Cancel</AlertDialog.Cancel
			>
			<AlertDialog.Action
				disabled={disableSubmit}
				on:click={() => {
					confirmed = true;
					disableSubmit = true;
					formEl.requestSubmit();
				}}
			>
				Submit
			</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

[milimyname]

Have u not encountered an issue with updating the fields value reactively? Let's say that u got an edit button etc and onclick of it, u need to populate the form with data. How would u do it? When u click on another item's edit button, the form data gets stuck with the previous item's data. That's my scenario. I wonder if there is something to do with let:config because form.data gets changed but no change in the fields value.

[shyakadavis]

Hi; I arrived at this solution from darbymanning's help over at Hunter's Discord server.

When u click on another item's edit button, the form data gets stuck with the previous item's data.

One of the problems with that approach (I think) is that all forms will have the same id (you can check your terminal for such a warning. If any, it should reference this: https://superforms.rocks/concepts/multiple-forms/)

The solution for this, if all your forms have the same schema, is to create individual ID's for all the forms, and populate each form with the data you want - all done server side.

Let me leave here snippets, perhaps they'll explain themselves better than I could. Hoping it'll at least offer some hints to @mehdikhody as well.

The highlight here (server side) is using a map to create individual forms with record ids as well, the id, 😅 . It makes it easier to reference the form on the client by just doing form={$page.data.delete_project_forms.get(id)}.

// +page.server.ts (minus un-related stuff)
export const load = async (event) => {
    if (!event.locals.user) redirect(302, '/auth/login');

    const projects = await event.locals.pb.from('projects').getFullList({ ... });

    const delete_project_forms = new Map<string, SuperValidated<typeof delete_project_schema>>();

    for (const project of projects) {
        delete_project_forms.set(
            project.id,
                        // the first param object is for data to be populated in my formsnap forms,
                        // the third object/options param is the actual form id
            await superValidate({ id: project.id }, delete_project_schema, { id: project.id })
        );
    }

    return { delete_project_forms, projects };
};

My data-table-row-actions.svelte (using the svelte-headless-table as my data table.)

<script lang="ts">
	import { applyAction } from '$app/forms';
	import { invalidateAll } from '$app/navigation';
	import { page } from '$app/stores';
	import { mediaQuery } from 'svelte-legos';
	import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
	import Eye from 'lucide-svelte/icons/eye';
	import MoreHorizontal from 'lucide-svelte/icons/more-horizontal';
	import Pencil from 'lucide-svelte/icons/pencil';
	import Trash2 from 'lucide-svelte/icons/trash-2';
	import { Button } from '$lib/components/ui/button';
	import * as AlertDialog from '$lib/components/ui/alert-dialog';
	import * as Drawer from '$lib/components/ui/drawer';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
	import * as Form from '$lib/components/ui/form';
	import type { FormOptions } from 'formsnap';
	import { delete_project_schema } from '$lib/types/project';

	export let id: string;

	let is_delete_project_open = false;

	const is_desktop = mediaQuery('(min-width: 768px)');

	const form_id = `delete_project_form_el_${id}`;

	const options: FormOptions<typeof delete_project_schema> = {
		id: form_id,
		onResult: async ({ result }) => {
			await invalidateAll();
			await applyAction(result);
			is_delete_project_open = false;
		},
		delayMs: 500
	};
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger asChild let:builder>
		<Button variant="ghost" builders={[builder]} class="flex size-8 p-0 data-[state=open]:bg-muted">
			<MoreHorizontal aria-hidden class="size-4" />
			<span class="sr-only">Open menu</span>
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-[160px]">
		<DropdownMenu.Item on:click={() => navigator.clipboard.writeText(id)}>
			<ClipboardCopy aria-hidden class="mr-2 size-4" />
			Copy ID
		</DropdownMenu.Item>
		<DropdownMenu.Item href={`/projects/${id}`}>
			<Eye aria-hidden class="mr-2 size-4" />
			View Details
		</DropdownMenu.Item>
		<DropdownMenu.Item href={`/projects/${id}/edit`}>
			<Pencil aria-hidden class="mr-2 size-4" />
			Edit
		</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item
			on:click={() => (is_delete_project_open = true)}
			class="text-rose-500 data-[highlighted]:bg-rose-500 data-[highlighted]:text-foreground"
		>
			<Trash2 aria-hidden class="mr-2 size-4" />
			Delete
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

<Form.Root
	id={form_id}
	action="/my/projects?/delete_project"
	schema={delete_project_schema}
	form={$page.data.delete_project_forms.get(id)}
	let:config
	let:delayed
	let:submitting
	{options}
>
	<Form.Field {config} name="id">
		<Form.Item hidden>
			<Form.Label>Project ID</Form.Label>
			<Form.Input />
		</Form.Item>
	</Form.Field>
	{#if $is_desktop}
		<AlertDialog.Root bind:open={is_delete_project_open}>
			<AlertDialog.Content>
				<AlertDialog.Header>
					<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
					<AlertDialog.Description>
						This action cannot be undone. This will permanently delete your project with ID <span
							class="text-destructive"
						>
							{id}
						</span>
						and remove its associated data from our servers.
					</AlertDialog.Description>
				</AlertDialog.Header>
				<AlertDialog.Footer>
					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
					<AlertDialog.Action type="submit" form={form_id}>Delete</AlertDialog.Action>
				</AlertDialog.Footer>
			</AlertDialog.Content>
		</AlertDialog.Root>
	{:else}
		<Drawer.Root bind:open={is_delete_project_open}>
			<Drawer.Content>
				<Drawer.Header>
					<Drawer.Title>Are you absolutely sure?</Drawer.Title>
					<Drawer.Description>
						This action cannot be undone. This will permanently delete your project with ID <span
							class="text-destructive"
						>
							{id}
						</span>
						and remove its associated data from our servers.
					</Drawer.Description>
				</Drawer.Header>
				<Drawer.Footer>
					<Button disabled={delayed || submitting} type="submit" form={form_id}>Delete</Button>
					<Drawer.Close>Cancel</Drawer.Close>
				</Drawer.Footer>
			</Drawer.Content>
		</Drawer.Root>
	{/if}
</Form.Root>

---

Hope it helps. 🙂

[mehdikhody]

Thank you for your response. Later that day, I achieved what I wanted through experimentation and searching in the documentation to find a method suitable for me. Here's what I came up with:

<script lang="ts">
  import type { SuperValidated } from "sveltekit-superforms";
  import type { FormOptions } from "formsnap";
  import type { SetupSchema } from "./schema";
  import { setupSchema } from "./schema";
  import * as Form from "$shadcn/form";
  import * as AlertDialog from "$shadcn/alert-dialog";
  
  export let form: SuperValidated<SetupSchema>;
  
  let formEl: HTMLFormElement;
  let disableSubmit = false;
  let showDialog = false;
  let confirmed = false;
  
  const options: FormOptions<SetupSchema> = {
    multipleSubmits: "prevent",
    onSubmit({ formData, cancel }) {
      const data = Object.fromEntries(formData);
      const result = setupSchema.safeParse(data);
      if (result.success && !confirmed) {
        cancel();
        showDialog = true;
      } else {
        confirmed = false;
      }
    },
    onResult() {
      disableSubmit = false;
    }
  };
</script>

<Form.Root schema={setupSchema} {form} {options} let:config let:enhance asChild>
  <form method="POST" class="space-y-4" use:enhance bind:this={formEl}>
    <Form.Field {config} name="username">
        <Form.Item>
          <Form.Label>Username</Form.Label>
          <Form.Input placeholder="admin username" />
          <Form.Validation />
        </Form.Item>
      </Form.Field>
    <Form.Field {config} name="password">
      <Form.Item>
        <Form.Label>Password</Form.Label>
        <Form.Input type="password" placeholder="••••••••••" />
        <Form.Validation />
      </Form.Item>
    </Form.Field>
    <Form.Field {config} name="confirmPassword">
	<Form.Item>
          <Form.Label>Confirm Password</Form.Label>
          <Form.Input type="password" placeholder="••••••••••" />
          <Form.Validation />
	</Form.Item>
    </Form.Field>
    <Form.Button class="w-full" disabled={disableSubmit}>
      Submit
    </Form.Button>
  </form>
</Form.Root>

<AlertDialog.Root bind:open={showDialog}>
  <AlertDialog.Content>
    <AlertDialog.Header>
    <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
    <AlertDialog.Description>
        This action cannot be undone. This will permanently create the
        admin account and securely store the associated data on the
        server.
    </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel
        on:click={() => {
          confirmed = false;
          formEl.reset();
      }}>
        Cancel
      </AlertDialog.Cancel>
      <AlertDialog.Action
        disabled={disableSubmit}
        on:click={() => {
          confirmed = true;
          disableSubmit = true;
          formEl.requestSubmit();
        }}
      >
        Submit
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>