React and form validation: an introduction

  • React
  • Gabriele Romanato

Form validation is a crucial aspect in the development of interactive web applications. In React, a JavaScript library for building user interfaces, managing form validation is simplified through the use of states, event handlers, and specialized libraries. In this article, we will explore common approaches to managing form validation in React.

The first thing to do is define a state for your form. Using React state, you can track form data and any validation errors. For example:


import { useState } from 'react';

const MyForm = () => {
   const [formData, setFormData] = useState({
     username: '',
     email: '',
     password: '',
   });

   const [errors, setErrors] = useState({});

   // Rest of the form code...
};

Each input field on the form should have its own change handler that updates the state of the form. Additionally, you can add validation logic into these handlers. An example could be the validation of the email field:


const handleEmailChange = (e) => {
   const { value } = e.target;
   setFormData({ ...formData, email: value });

   // Email validation
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   const isValid = emailRegex.test(value);

   setErrors((prevErrors) => ({ ...prevErrors, email: isValid ? '' : 'Invalid email' }));
};

To give immediate feedback to the user, it is important to view validation errors. This can be done under each corresponding field in the form:


{/* ... */}
<label>Email</label>
<input
   type="email"
   value={formData.email}
   onChange={handleEmailChange}
/>
{errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
{/* ... */}

In addition to validating individual fields, it is necessary to add validation logic for the complete form. For example, when the user submits the form:


const handleSubmit = (e) => {
   e.preventDefault();

   // General validation of the form
   const isValidForm = Object.values(errors).every((error) => !error);

   if (isValidForm) {
     // Submit the form data
     console.log('Valid form data:', formData);
   } else {
     console.log('The form contains validation errors');
   }
};

There are also third-party libraries that simplify the management of form validation in React. Some examples include Formik and Yup. These libraries provide a more declarative way of handling validation and simplify the process.


npm install formik yup

Conclusions

Handling form validation in React requires a combination of state management, event handlers, and validation logic. Be sure to provide clear feedback to users regarding validation errors and consider using specialized libraries to further streamline this process. With good form validation management, you can improve the user experience and ensure that the data received is correct and reliable.

Back to top