Form Submission disabled

[OmarGoubail]

Hello Everyone!

I've been using conform for a while, never encountered any issues and I absolutely love it. Ran into a weird issue though, but hopefully it's something I've done wrong and not a bug.

Working on a demo with remix, and for some reason the form does not submit. After a while I realized that removing {...form.props} allows normal submission, but of course removes validations. It's very weird.

 const [form, fields] = useForm({
    id: "add-event",
    constraint: getFieldsetConstraint(addEventSchema),
    lastSubmission: actionData?.submission,
    onValidate({ formData }) {
      return parse(formData, { schema: addEventSchema });
    },

    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
  });


 <Form method="post" {...form.props} className="flex flex-col gap-4">
        <h3 className="font-medium text-lg"> Add an Event</h3>
        <div className="flex flex-col gap-4">
          <Label htmlFor={fields.name.id}>Name</Label>
          <Input
            {...conform.input(fields.name)}
            className="w-full"
            placeholder="Name"
          />

          <ErrorList errors={fields.name.errors} id={fields.name.id} />
        </div>

      

        <div className=" flex flex-col gap-4">
          <Label htmlFor={fields.locationCoordinates.id}>
            Location Coordinates
          </Label>

          <Input
            {...conform.input(fields.locationCoordinates)}
            className="w-full"
            placeholder="Location Coordinates"
          />

          <ErrorList
            errors={fields.locationCoordinates.errors}
            id={fields.locationCoordinates.id}
          />
        </div>

        <div className=" flex flex-col gap-4">
          <Label htmlFor={fields.price.id}>Price</Label>

          <Input
            {...conform.input(fields.price)}
            className="w-full"
            placeholder="Price"
          />

          <ErrorList errors={fields.price.errors} id={fields.price.id} />
        </div>

        <Button className=" w-60 my-12">
          {" "}
          {isLoading ? "Adding..." : "Add"}
        </Button>
      </Form>{" "}

Anyone run into this before?

[edmundhung]

If the form is not being submitted, it's likely Conform find client error in your onValidate handler. Maybe try inspecting the return value of parse(formData, { schema: addEventSchema }) and see if you find something.

[OmarGoubail]

Yes, it turns out there was an error, The calendar component wasn't controlled therefore wasn't submitted. It was a mistake on my part, but I do wonder, maybe conform could give a warning it finds client errors.

I would be happy to open a pr, if you agree.

[edmundhung]

I think the major issue here is that it wasn't easy to find out all the errors except tweaking the onValidate handler. But this should be much simpler once we released the changed mentioned in the RFC as you will be able to check the validity of the form and all the errors through form.allValid and form.allError.

Maybe we can build a debugger for this as well. 👀