在svelte Superform上，如何在不使用+page.server.ts的情况下显示错误消息

Question

我正在为我的 Svelte 应用程序使用 shadcn-svelte 表单。目前，我正在尝试使用 Zod 验证我的表单数据客户端并在输入字段下方显示错误消息。但是，我不确定我当前的方法是否是处理错误的最佳方法。

这是我的架构：

some-page/schema.ts

import { z } from "zod";
 
export const formSchema = z.object({
  email: z.string().min(2).max(50).toLowerCase(),
  password: z.string().min(3).toUpperCase()
});
 
export type FormSchema = typeof formSche

some-page/+page.svelte

<script lang="ts">
  import * as Form from "$lib/components/ui/form";
  import { Input } from "$lib/components/ui/input";
  import { formSchema, type FormSchema } from "./download-schema";
  import SuperDebug, {
    type SuperValidated,
    type Infer,
    superForm,
  } from "sveltekit-superforms";
  import { zodClient } from "sveltekit-superforms/adapters";
 
  export let data: SuperValidated<Infer<FormSchema>>;
 
  const form = superForm(data, {
    validators: zodClient(formSchema)
  });
 
  const { form: formData, constraints, errors } = form;


  function onSubmit() {
  try {
    formSchema.parse($formData);
    console.log("Validation successful!");
  } catch (error: any) {
    console.error("Validation failed:");
    error.errors.forEach((err: any) => {
      console.error(`Path: ${err.path.join('.')}, Message: ${err.message}`);
      // for each error
      console.error(err.path.join('.'))
      errors.set({
          [err.path.join('.')]: err.message
      })
    });
  }
}
</script>
 
<SuperDebug data={$formData}/>
<form on:submit={onSubmit}>
    <Form.Field {form} name="email">
    <Form.Control let:attrs>
      <Form.Label>Email</Form.Label>
      <Input type="email" {...attrs} bind:value={$formData.email} {...$constraints.email}/>
    </Form.Control>
    <Form.Description>Email.</Form.Description>
    <Form.FieldErrors />
  </Form.Field>

  <Form.Field {form} name="password">
    <Form.Control let:attrs>
      <Form.Label>Password</Form.Label>
      <Input type="password" {...attrs} bind:value={$formData.password} {...$constraints.password}/>
    </Form.Control>
    <Form.Description>Password</Form.Description>
    <Form.FieldErrors />
  </Form.Field>
  <Form.Button type="submit">Download</Form.Button>
</form>

问题

我能够捕获验证错误并将其记录在控制台中，但毕竟，我需要在 UI 上显示错误。我不确定像这样在错误存储中设置错误是否是处理客户端错误设置的正确方法。错误没有按预期显示在输入字段下方。

问题

在不使用服务器端代码的情况下，我应该如何正确处理和显示相应输入字段下方的验证错误？是否有推荐的方法来使用 shadcn-svelte 表单和 Zod 管理和显示错误消息？

Answer 1

这有效

<script lang="ts">
  import * as Form from "$lib/components/ui/form";
  import { Input } from "$lib/components/ui/input";
  
  import {
    type SuperValidated,
    type Infer,
    superForm,
  } from "sveltekit-superforms";
  import { zodClient } from "sveltekit-superforms/adapters";
    import { formSchema, type FormSchema } from "./download-schema";
 
  export let data: SuperValidated<Infer<FormSchema>>;
 
  const form = superForm(data, {
    validators: zodClient(formSchema),
  });
 
  const { form: formData, constraints, errors, validateForm } = form;

  const handleSubmit = async () =>{
    const result = await validateForm();
    if(!result.valid){
      errors.update(v=>{
        return{
          ...v,
          email: result.errors.email,
          password: result.errors.password,
        }
      })
    }else{
         console.log($formData)
    }
  }

</script>
 


<form >
  <Form.Field {form} name="email">
    <Form.Control let:attrs>
      <Form.Label>Email</Form.Label>
      <Input {...attrs} bind:value={$formData.email} {...$constraints.email} />
    </Form.Control>
    <Form.Description>This is your public display name.</Form.Description>
    <Form.FieldErrors />
  </Form.Field>

  <Form.Field {form} name="password">
    <Form.Control let:attrs>
      <Form.Label>Password</Form.Label>
      <Input {...attrs} bind:value={$formData.password} />
    </Form.Control>
    <Form.Description>This is your public display name.</Form.Description>
    <Form.FieldErrors />
  </Form.Field>
  <Form.Button on:click={handleSubmit}>Submit</Form.Button>
</form>