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 (

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