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

There are several validations solutions available, and with Createform it's possible to use Yup, or Zod.

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 Createform produces a hook that 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, Createform uses the uncontrolled inputs option, this means that the values ​​are accessible when the onSubmit event is dispatched.

import { createForm } from "@createform/react";
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>
  );
}