Forms validations

Validation

Form validation is the process of ensuring that the values entered into a form by the user are correct and complete. This is typically done using a combination of client-side and server-side validation.

  • Client-side validation is performed using JavaScript, and it involves checking the form values on the client (the user's web browser) before they are submitted to the server. This can help to catch any obvious mistakes or missing values, and it can provide immediate feedback to the user so that they can fix any problems before they submit the form.

  • Server-side validation is performed on the server after the form has been submitted. This involves checking the form values against a set of rules or a validation schema to ensure that they are correct and complete. If there are any problems with the form values, the server can return an error message to the user, or it can take some other action, such as rejecting the form submission or redirecting the user to another page.

Overall, form validation is an important part of the form submission process, and it helps to ensure that the data entered into a form is accurate and complete. This can help to prevent mistakes and improve the user experience.

Some examples

  • "This field is required" (You can't leave this field blank).
  • "Please enter your phone number in the format xxx-xxxx" (A specific data format is required for it to be considered valid).
  • "Please enter a valid email address" (the data you entered is not in the right format).
  • "Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (A very specific data format is required for your data).

But why is this so important?

Form validation is a very important part of the web development process. It's a way to make sure that the data you enter is valid. If you don't validate your data, it's possible that your data will be lost or corrupted.

Server-side validations are the last part of the validation, which means, even if the data is in the correct format it's possible that the data can't be stored because some data can't be duplicated like email or username, this kind of validation is done in server-side. Client-side validation deal with incorrect data format, like a valid email, or a valid password, which means, that before the data is submitted the client-side validates if it is a valid data format.

Description

Update

We are excited to announce that our form now supports Zod validation! Zod is a powerful and lightweight library for validating and handling data in TypeScript. With Zod, you can easily create complex, type-safe schemas for your form data and automatically validate user input. This will help ensure that your form is always receiving accurate and reliable data. Give it a try and let us know what you think!

There are several validations solutions available, but when using useForm the default solution is Yup. Yup is a JavaScript library that provides a powerful and easy-to-use validation schema. To use Yup for form validation, you can create a validation schema that defines the rules for each field in the form, and then use that schema to validate the form values.

jsx
const formSchema = yup.object().shape({
email: yup.string().email('Invalid email').required('Email is required'),
password: yup
.string()
.min(8, 'Password must be at least 8 characters')
.required('Password is required'),
});

The useForm returns an error object, that has all errors, and this object is updated whenever the input state is changed or when the form is submitted if your form has validation.

Usually you wannt to show the error message just when a field is touched, you can do that by using the touched object. Thouched object is an object that has all the fields that are touched, and the value of the field is true if the field is 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 { createForm } from '@use-form/use-form';
import * as yup from 'yup';
const validationSchema = 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'),
});
const useForm = createForm({
initialValues: {
name: 'Jesse',
email: 'jesse@jesse.com',
pets: ['felix'],
accept: false,
},
mode: 'onChange',
validationSchema,
});
function Form() {
const { register, state, handleSubmit } = useForm();
const { errors, touched } = state;
function onSubmit(data) {
console.log(data);
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<fieldset>
<input {...register('name')} />
<span>{touched.name && errors.name}</span>
</fieldset>
<fieldset>
<input {...register('email')} />
<span>{touched.email && errors.email}</span>
</fieldset>
<fieldset>
<input {...register('pets')} />
<span>{touched.pets && errors.pets}</span>
</fieldset>
<input {...register('pets.0')} />
<fieldset>
<input {...register('accept')} />
<span>{touched.accept && errors.accept}</span>
</fieldset>
<button type="submit">Submit</button>
</form>
);
}

If you don't want to use Yup validation, you can use any other validation library, or write your own validation logic.

Demo