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

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'),
// ...
});

--

--

--

Previously Paris and Geneva, currently New York. Can also be found at https://dev.to/arnaud

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Quick and Easy Guide to React Component Lifecycle Methods

Next.js for React: Why You Should Give It a Try Right Now

JavaScript: How to Implement a WebSocket Backend

Code as requirements using generators

Advance To A Particular Slick Slide or Center using slickGoTo

Fixed size variant of Sliding window technique — Maximum Average Subarray1 (Leetcode)

Visualize fraudulent transactions via CEP with Kafka, Flink, SQL, D3.js and Mapbox.

How To Toggle State In React Using React Hooks

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
Arnaud Dostes

Arnaud Dostes

Previously Paris and Geneva, currently New York. Can also be found at https://dev.to/arnaud

More from Medium

Solution for problem with useState and eventHandlers

Global variables using Styled Components

React.memo with useCallback to avoid optimising the rendering in React

How & when to use redux in react projects?