主页 / coding / 问题 / 78947969
Accepted
redmamoth
Asked: 2024-09-04 17:46:02 +0800 CST

Superforms、zod 和服务器操作未运行

  • 772

我有一组 id，我想为每个 id 显示一个按钮，单击该按钮时会将 id 提交到 page.server.ts 中的操作。这应该很简单，但我绞尽脑汁想让它工作。

最小可重复示例

例子.schemas.ts

import { z } from "zod";
 
export const exampleSchema = z.object({
  exampleId: z.string().length(24),
});
 
export type ExampleSchema = typeof exampleSchema;

例如-component.svelte

<script lang="ts">
    import { exampleSchema, type ExampleSchema } from "./example.schema";
    import {
        type SuperValidated,
        type Infer,
        superForm,
    } from "sveltekit-superforms";
    import SuperDebug from 'sveltekit-superforms';

    import { zodClient } from "sveltekit-superforms/adapters";

    export let data: SuperValidated<Infer<ExampleSchema>>;

    const form = superForm(data, {
        validators: zodClient(exampleSchema),
    });

    const { form: formData, enhance, message } = form;

    let exampleArray = ["507f1f77bcf86cd799439011","507f1f77bcf86cd799439012","507f1f77bcf86cd799439013"]

</script>

<form method="POST" action="?/exampleAction" use:enhance>
  {#each exampleArray as item}
    <input type="hidden" name="exampleId" value="{item}"/>
    <button type="submit" >{item}</button><br />
  {/each}
</form>
<SuperDebug data={formData} />

+页面.服务器.ts

import type { PageServerLoad, Actions } from "./$types";
import { superValidate } from "sveltekit-superforms";
import { exampleSchema } from "$lib/components/custom/example.schema";
import { zod } from "sveltekit-superforms/adapters";

export const load: PageServerLoad = async () => {
  return {
      exampleForm: await superValidate(zod(exampleSchema)),
  };
};

export const actions: Actions = {
    exampleAction: async ({ request }) => {    
      const formData = await request.formData();
      const exampleId = formData.get('exampleId');
  
      // Process the ID as needed
      console.log('Submitted ID:', exampleId);
  
      return { success: true };
    }
};

+页面.svelte

<script lang="ts">
  import type { PageData, ActionData } from './$types';
  import Example from "$lib/components/custom/example-component.svelte";
  
  export let data: PageData;

</script>

<Example data={data.exampleForm} />

SuperDebug 总是显示 exampleId 为空，并且验证总是失败，看起来我的操作根本没有运行。

sveltekit

1 个回答

  1. Best Answer

    该表单无效，因为exampleId从未传输到表单数据，因此表单根本没有提交。

    这件事中有不少奇怪之处：

    • 您有一个表单和多个同名的输入，但只希望发送一个值。
      您可能应该直接通过按钮发送值，而不是使用输入。 
      <button
    type="submit"
    name="exampleId" value={item}>
    {item}
</button>
    • 验证是针对用户输入的，验证具有固定值的隐藏字段毫无意义。您可以省略客户端验证，这样表单就应该有效并提交。 
      const form = superForm(data, {
    validators: zodClient(exampleSchema.omit({ exampleId: true })),
});
      还有一种设置表单数据存储属性的方法，需要 JS，例如 
      <!-- only one input required -->
<input type="hidden" name="exampleId" value={$formData.exampleId} />
{#each exampleArray as item}
    <button
        type="submit"
        on:click={() => $formData.exampleId = item}>
        {item}
    </button>
    <br />
{/each}
    • 应直接在请求上进行服务器上的验证，并form根据文档返回验证后的对象。 
      const form = await superValidate(request, zod(exampleSchema));

console.log('Submitted ID:', form.data.exampleId);

return { form };
    • （表单操作绑定到页面，放入表单libs似乎可能会导致错误，因为组件可能与大多数或任何其他页面不兼容。）
    • 1

相关问题