Building a Simple Form with Validation in React

Forms are an essential part of any web application, allowing users to input data and interact with the system. In React, managing forms efficiently requires handling state, events, and validation properly.

In this article, we’ll explore how to build a simple form with validation using React’s useState hook. We'll also cover handling form submissions and error messages.

Managing Form State in React

React provides the useState hook to manage component state, making it ideal for handling form inputs dynamically. Instead of using traditional DOM-based form handling, React keeps track of form data within the component's state.

To start, let’s initialize our state using useState:

import React, { useState } from "react";

const SimpleForm = () => {
  const [formData, setFormData] = useState({
    name: "",
    age: "",
    email: "",
  });
  const [errors, setErrors] = useState({});

Handling Input Changes

We need to update the state whenever the user types into an input field. This can be achieved using the onChange event:

const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

Each input field will have an onChange event that triggers this function to update the respective state property.

Adding Validation

To ensure that users enter valid data, we’ll define a simple validation function:

const validate = () => {
    let tempErrors = {};
    if (!formData.name) tempErrors.name = "Name is required";
    if (!formData.age || isNaN(formData.age)) tempErrors.age = "Valid age is required";
    if (!formData.email.includes("@")) tempErrors.email = "Valid email is required";
    setErrors(tempErrors);
    return Object.keys(tempErrors).length === 0;
  };

Handling Form Submission

Finally, when the form is submitted, we validate the input and log the form data if valid:

const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log("Form submitted:", formData);
    }
  };

Full Form Component

const SimpleForm = () => {
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
        {errors.name && <p>{errors.name}</p>}
      </div>
      
      <div>
        <label>Age:</label>
        <input type="text" name="age" value={formData.age} onChange={handleChange} />
        {errors.age && <p>{errors.age}</p>}
      </div>
      
      <div>
        <label>Email:</label>
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
        {errors.email && <p>{errors.email}</p>}
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
};
export default SimpleForm;

Watch the Video Tutorial

For a step-by-step walkthrough, check out the video tutorial below:

Conclusion

Handling forms in React requires proper state management, validation, and event handling. By using the useState hook, we can efficiently manage user inputs, track errors, and ensure a smooth user experience.

For more React tutorials and code snippets, visit CodeyMaze. Happy coding! 🚀