Qwik: Initial values from useForm's loader gets applied once again before submission

[arjunmurali1993]

I'm using a modular form on my contact page, and it seemed to be working fine until I randomly checked today, when it started throwing validation errors upon submission.

I use valibot and the schema is correct.

I checked multiple things and figured out that the loader in useForm seems to be getting applied once again before the useFormAction runs to submit the form.

Thus, the initial values which are empty strings, seem to be triggering validation errors. When I remove all validation, the form submits with the initial values from the useForm's loader rather than the data entered in the form by the user.

Here's my code:

export const useFormAction = formAction$<ContactUsForm>(async (values) => {
  // Runs on server
  console.log("Running on Server");
  console.log(values);

  const emailSubject = subject + " by " + values.fullName;
  const emailBody: string = `
  Email message
  `;

  try {
    await sendEmailViaSendgrid(toEmail, fromEmail, emailSubject, emailBody);

    return {
      status: "success",
      message: "Contact Form Data successfully submitted",
    };
  } catch (error: any) {
    console.log(
      "Error while sending contact form email to " +
        toEmail +
        ". Error: " +
        error,
    );

    return {
      status: "error",
      message: "Error is : " + error,
    };
  }
}, valiForm$(ContactUsFormSchema));

export default component$(() => {

  const contactUsFormInitialValues = useSignal({
    fullName: "",
    email: "",
    phone: "",
    whatsapp: "",
    message:
      "Message",
  });

  const [contactUsForm, { Form, Field }] = useForm<ContactUsForm>({
    loader: contactUsFormInitialValues,
    action: useFormAction(),
    validate: valiForm$(ContactUsFormSchema),
  });

  return (
      <>
        <Form
          class="relative"
        >
        //All fields and submit button with type as submit
        </Form>
      </>
  );
});

Form Schema:

import * as v from "valibot";

export const ContactUsFormSchema = v.object({
  fullName: v.pipe(v.string(), v.nonEmpty("Please enter your full name.")),
  email: v.pipe(
    v.string(),
    v.nonEmpty("Please enter your email."),
    v.email("Please check the email id."),
    v.maxLength(30, "Your email is too long."),
  ),
  phone: v.pipe(v.string(), v.nonEmpty("Please enter your phone number.")),
  whatsapp: v.string(),
  message: v.pipe(
    v.string(),
    v.nonEmpty("Please enter a message."),
    v.maxLength(5000, "Your message is too long."),
  ),
});

export type ContactUsForm = v.InferInput<typeof ContactUsFormSchema>;

[fabian-hiller]

What version of Qwik and Modular Forms are you using?

[arjunmurali1993]

Qwik Version is "1.9.0" and Modular forms Qwik version is "0.28.2".

Here's the output of my npm list command:

├── @builder.io/[email protected]
├── @builder.io/[email protected]
├── @builder.io/[email protected]
├── @builder.io/[email protected]
├── @emotion/[email protected]
├── @emotion/[email protected]
├── @modular-forms/[email protected]
├── @mui/[email protected]
├── @mui/[email protected]
├── @quasarwork/[email protected]
├── @qwikest/[email protected]
├── @sendgrid/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[fabian-hiller]

I am very sorry for my late reply but I have almost no time for Modular Forms right now. I will probably very soon start to rewrite the entire library and fix many things.