SvelteKit中使用Form enhance验证后更新表单字段问题

问题原因 #

使用use:enhance时，自定义回调中重复调用applyAction和update()导致状态更新冲突，服务器返回的清空后密码数据无法正确同步到表单输入框。未使用enhance时，表单默认处理逻辑能正确应用服务器返回的状态。

解决方案 #

1. 修正use:enhance的回调逻辑 #

移除多余的applyAction调用，并在成功跳转后终止后续执行：

<form
    method="post"
    action="?/register"
    class="flex flex-col gap-6 m-2"
    use:enhance={({formData}) => {
        return async ({ result, update }) => {
            if (result.type === 'success') {
                // 成功后直接跳转，无需执行update
                window.location.href = './login';
                return;
            }
            // 失败时仅调用update，它会自动应用服务器返回的结果并更新页面状态
            await update();
        };
    }}
>

2. 确保表单输入框正确绑定状态 #

确认组件中已正确订阅$page.form，保证输入框的value能响应服务器返回的状态变化：

<script>
    import { page } from '$app/stores';
    import { enhance } from '$app/forms';
</script>

<input 
    name="password" 
    required 
    type="password" 
    placeholder="Password" 
    value={$page.form?.data.password ?? ''} 
    class="w-60 rounded-lg p-2 border-2 border-gray-300 focus:border-orange-500 focus:outline-none" 
/>
<input 
    name="passwordConfirm" 
    required 
    type="password" 
    placeholder="Password confirm" 
    value={$page.form?.data.passwordConfirm ?? ''} 
    class="w-60 rounded-lg p-2 border-2 border-gray-300 focus:border-orange-500 focus:outline-none" 
/>

3. 保留服务器端验证逻辑 #

服务器端代码无需修改，继续在密码不匹配时清空字段并返回fail状态：

// +page.server.ts
// Check if password and passwordConfirm match
if (input.password !== input.passwordConfirm) {
    input.password = '';
    input.passwordConfirm = '';
    return fail(422, { error: 'Passwords do not match', data: input });
}

原理说明 #

use:enhance的update()方法内部已经包含了应用服务器返回的action结果（包括更新$page.form状态）的逻辑，重复调用applyAction会干扰这一过程。成功跳转后返回终止执行，避免不必要的状态更新操作。

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