Closed JolianGof closed 1 week ago
chanthinh
commented
6 months ago 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
commented
6 months ago 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
commented
6 months ago @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
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 (
); };
export default App; And here's the output I get when I submit the form:
{ "lastName": "fds" }