Description
Description
I'm encountering a critical issue with sveltekit-superforms
where none of the form fields are being recognized. Despite following the documentation and ensuring that dataType: 'json'
is set and use:enhance
is applied, the form initialization fails, and I receive errors indicating that all fields are missing from the form object. This issue affects all fields defined in the schema.
Schema
import { z } from 'zod';
export const createUserSchema = z.object({
userName: z.string().min(1, 'Username is required'),
firstName: z.string().min(1, 'First name is required'),
lastName: z.string().min(1, 'Last name is required'),
password: z.string().min(6, 'Password must be at least 6 characters'),
confirmPassword: z.string().min(6, 'Confirm password must be at least 6 characters'),
isSystemAdmin: z.boolean(),
isEnabled: z.boolean(),
tags: z.array(z.string()),
roles: z.array(z.string()),
permissions: z.string(),
description: z.string().optional()
}).refine(data => data.password === data.confirmPassword, {
message: "Passwords don't match",
path: ['confirmPassword']
});
Form Initialization
const { form, errors, enhance } = superForm({
dataType: 'json',
validators: zodClient(createUserSchema),
initialValues: {
userName: '',
firstName: '',
lastName: '',
password: '',
confirmPassword: '',
isSystemAdmin: false,
isEnabled: true,
tags: [],
roles: [],
permissions: '',
description: ''
},
onSubmit: async ({ cancel }) => {
if (form.password !== form.confirmPassword) {
toastError('Passwords do not match');
return;
}
cancel();
try {
const userRequest = {
userName: form.userName,
firstName: form.firstName,
lastName: form.lastName,
description: form.description || '',
password: form.password
};
const newUser = await createUser(userRequest);
toastSuccess('User created successfully');
goto(`/detail?id=${newUser.id}&type=user`);
} catch (error) {
toastError(error.toString() || 'Failed to create user');
}
}
});
Steps to Reproduce
- Initialize a form using superForm with the above schema.
- Set dataType: 'json' and apply use:enhance to the form element.
- Bind form fields and attempt to handle form submission.
- Observe errors indicating that none of the fields exist in the form object.
Expected Behavior
The form should initialize correctly with the provided schema and initial values, allowing for client-side validation and submission handling without errors.
Actual Behavior
Page doesnt load. Console log message:
Unhandled Promise Rejection: Error: Object found in form field "validators". Set the dataType option to "json" and add use:enhance to use nested data structures. More information: https://superforms.rocks/concepts/nested-data
Issues with handling nested data structures despite setting dataType: 'json'.
Additional Context
SvelteKit version: 2.8.1
sveltekit-superforms version: 2.20.1
Browser: Chrome
Operating System: MacOS 15.1