Validating a form in React

  • Build a form with React
  • Validate a form manually, without the help of any external libraries
  • Validate the same form using the helper library Formik
  • Compare the pros and cons of both solutions
Validating a form in React

Building the form

To create the form, we’re going to create what’s called a controlled component: the form is going to have a state which will contain what the user types in the fields. The form will contain a first name, last name, an age and an email. The first and last name can only contain letters, dashes and a space, and must be at least three characters long. The age must be between 18 and 99, and the email must be valid. The validation rules don’t matter that much, for instance it doesn’t make sense to enforce a minimum length on a name, so don’t focus on that, the idea is to show how to have more than one constraint on a field.

A screenshot of the form we are building
A diagram representing the hierarchy of the React components
  • App component: holds the initial values for the form, and a function used to validate each field.
  • Validate manually: contains the state for the form, the logic for onBlur/onChange/onSubmit events and invokes validation logic when appropriate.
  • Validate with Formik: contains the state for the form, the logic for onBlur/onChange/onSubmit events and uses Formik to validate the form.
  • Form: a simple functional component that displays input fields.
  • errors: a key value pair object where the key is the field, and the value is the error detected for that field. If there is no error on the field, the key will not be in the object.
  • touched: a key value pair object where the key is the field, and the value is true if the field has been modified. The key is present only if the user has touched the field (modified its value or triggered an onBlur event). This allows us to know whether or not to display an error.
  • values: a key value pair where the key is the name of the field, and the value is the value of the field (either initial value, or what the user entered)
  • handleSubmit: a function passed to the handleSubmit prop of the form tag. This is the logic that will be executed when the user clicks on the Submit button.
  • handleChange: a function passed to the handleChange prop of the input tags. This is the logic that will save what the user enters in the field.
  • handleBlur: a function passed to the handleBlur prop of the input. This is the logic that will validate the field value.
<div className="form-group">
<label htmlFor="first-name-input">
First Name *
<input
type="text"
className="form-control"
id="first-name-input"
placeholder="Enter first name"
value={values.firstName}
onChange={handleChange}
onBlur={handleBlur}
name="firstName"
required
/>
{touched.firstName && errors.firstName}
</label>
</div>
const SignupSchema = Yup.object().shape({
firstName: Yup.string()
.min(3, 'First name needs to be at least three characters')
.max(70, 'Too Long!')
.required('First name is required'),
email: Yup.string()
.email('Please enter a valid email')
.required('Email is required'),
// ...
});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store