SvelteKit前端表单验证失败提示未显示问题求助

问题描述 #

我是SvelteKit新手，参考教程实现表单验证。当密码与确认密码不匹配时，控制台能捕获错误信息，但前端页面未显示该失败提示。以下是相关代码：

表单代码 #

<script>
    import { useForm, validators, HintGroup, Hint, email, required} from "svelte-use-form";
    // @ts-ignore
    import Logo from "/src/components/Logo.svelte";
    export let form;
</script>

<form method="POST" action="/register?/create">
    {#if form?.error}
        <div class="error">
            <p>{form.error}</p>
        </div>
    {/if}

    <label for="email">Full name</label>
        <input type="text" name="name" required />

    <label for="email">Email</label>
        <input type="email" name="email" required />

    <label for="password">Wachtwoord</label>
        <input type="password" name="password" required />

    <label for="password">Bevestig wachtwoord</label>
        <input type="password" name="requirePassword" required />
  
    <button>Login</button>

    <p>Nog geen account?<a href="google.com">Registreer hier</a></p>
</form>

+page.server.js代码 #

// @ts-nocheck
import { fail } from '@sveltejs/kit';

export const actions = {
    create: async({ request }) => {
        const data = await request.formData();
        const username = data.get('name')
        const email = data.get('email')
        const password = data.get('password')
        const confirmed = data.get('requirePassword')
        console.log({username, email, password, confirmed})

        if (password !== confirmed) {
            return fail(422, {
                error: 'Wachtwoorden komen niet met elkaar overeen'
            });
        }
    }
}

问题排查与解决 #

核心问题：表单action路径错误 #

控制台能捕获错误说明后端逻辑正常，前端未显示错误是因为表单action的绝对路径写法导致form变量无法正确接收后端返回的错误数据。

SvelteKit中，当前页面的action应使用相对路径写法?/create，而非绝对路径/register?/create。修改表单标签：

<form method="POST" action="?/create">

可选优化：保留用户输入内容 #

为提升用户体验，建议在返回fail时携带用户已输入的字段，这样提交错误后表单不会清空：

return fail(422, {
    error: 'Wachtwoorden komen niet met elkaar overeen',
    name: username,
    email: email,
    password: password,
    requirePassword: confirmed
});

同时给输入框绑定值：

<input type="text" name="name" required value={form?.name ?? ''} />
<input type="email" name="email" required value={form?.email ?? ''} />
<input type="password" name="password" required value={form?.password ?? ''} />
<input type="password" name="requirePassword" required value={form?.requirePassword ?? ''} />

额外检查：CSS样式 #

确认.error类有可见的样式（比如设置文字颜色为红色、不隐藏元素），避免错误信息存在但无法被看到。

内容的提问来源于stack exchange，提问作者Stef Verniers