Issue with valibotResolver causing unexpected form submission behavior

[JolianGof]

I am using react-hook-form with valibotResolver to validate my form data. I have noticed an issue where only the lastName field is included in the form data when the form is submitted, even though I have firstName and age fields in my form.

Link to CodeSandbox Project: https://codesandbox.io/p/devbox/fkzp9q?file=%2Fmyapp%2Fvite-project%2Fsrc%2FApp.tsx%3A1%2C1-79%2C1

this is my code import React from "react"; import { useForm, Controller } from "react-hook-form"; import { valibotResolver } from "@hookform/resolvers/valibot"; import { coerce, maxLength, maxValue, minLength, minValue, number, object, Output, safeInteger, string, } from "valibot"; // import { formSchema } from './schema'; export const formSchema = object({ lastName: string([ minLength(1, "This field is required."), maxLength(5, "Please enter within 2 characters."), ]), }); const App = () => { const { handleSubmit, control, formState } = useForm({ mode: "onChange", defaultValues: { lastName: "fds", firstName: "sdf", age: "2", }, resolver: valibotResolver(formSchema), });

const handleOnSubmit = handleSubmit((formType) => { alert(JSON.stringify(formType)); });

console.log("errors", formState.errors);

return (

<form onSubmit={handleOnSubmit}> Last Name <Controller name="lastName" control={control} render={({ field }) => <input {...field} />} /> {formState.errors?.lastName?.message?.toString() || ""}

    <label>First Name</label>
    <Controller
      name="firstName"
      control={control}
      render={({ field }) => <input {...field} />}
    />
    <span>{formState.errors?.firstName?.message?.toString() || ""}</span>

    <label>Age</label>
    <Controller
      name="age"
      control={control}
      render={({ field }) => <input type="text" {...field} />}
    />
    <span>{formState.errors?.age?.message?.toString() || ""}</span>

    <button
      type="submit"
      disabled={!formState.isDirty || !formState.isValid}
    >
      execute
    </button>
  </form>
</div>

); };

export default App; And here's the output I get when I submit the form:

{ "lastName": "fds" }

[chanthinh]

Hi @JolianGof, You are missing firstName and age in your schema, add these to your schema and try again

export const formSchema = object({
  lastName: string([
    minLength(1, "This field is required."),
    maxLength(5, "Please enter within 2 characters."),
  ]),
firstName: string(),
age: string()
});

[JolianGof]

Hi,

Thank you for the response. I understand that the valibotResolver requires all fields in the form to be defined in the validation schema. However, in my case, I have a large form and I only want to validate some of the fields.

For instance, if I have a form with fields firstName, lastName, age, and many others, and I only want to validate firstName and age, how would I go about doing that?

Should I include all fields in the schema and provide simple validation rules like string() or number() for the fields I don't want to validate? Or is there a better way to handle this scenario?

Thank you for your guidance.

[chanthinh]

@JolianGof, I understand what you want, so you can try to use yupResolver Check this one: https://codesandbox.io/p/sandbox/react-hook-form-yup-resolver-forked-4k44jg?file=%2Fsrc%2FcolorScheme.js%3A11%2C4