Forms valodation

Description

When working with real application validations forms are very common because this is the way you can verify if the input's value is correct or not. There are several validations solutions available, but when using useForm the default solution is Yup. With yup the process of validations is very simple and powerful.

The useform returns an error object, that has all errors, and this object is updated every time the input is changed or when the form is submitted if you are using an uncontrolled form.

It's important to remember that to show error the correct way you need knows if an input with error is touched or not. You can discover this information with an object called touched, this object has all properties of the initial values object but instead of values, the object has a boolean value, this boolean value shows you if a specific input was touched.

Usage

Validation is performed whenever the state is changed. By default, useForm uses the uncontrolled inputs option, this means that the values ​​are accessible when the onSubmit event is dispatched.

jsx
import { useForm } from "@use-form/use-form";
import * as yup from "yup";
const initialValues = {
name: "Jesse",
email: "jesse@jesse.com",
pets: ["felix"],
accept: false,
};
const validation = yup.object().shape({
name: yup.string().required("This field is required"),
email: yup
.string()
.email("This field must be a valid e-mail")
.required("This field is required"),
pets: yup.array(yup.string().required("This field is required")),
accept: yup.bool().oneOf([true], "Field must be checked"),
});
function ControlledForm() {
const { register, state } = useForm({
isControlled: true,
initialValues,
validationSchema,
});
return (
<>
<input {...register("name")} />
<span>{touched.name && errors.name}</span>
<input type="email" {...register("email")} />
<span>{touched.email && errors.email}</span>
<input {...register("pets.0")} />
<span>{touched.pets?.[0] && errors.pets?.[0]}</span>
<input type="checkbox" {...register("accept")} />
<span>{touched.accept && errors.accept}</span>
</>
);
}

Demo