Skip to content

Form Fields Not Recognized in sveltekit-superforms Despite Correct Schema and Setup #513

Open
@ethanfox

Description

@ethanfox

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

  1. Initialize a form using superForm with the above schema.
  2. Set dataType: 'json' and apply use:enhance to the form element.
  3. Bind form fields and attempt to handle form submission.
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingquestionFurther information is requested

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions