DEV Community: Chinenye Oluyede

Mastering Form Validation in React

Chinenye Oluyede — Sat, 12 Oct 2024 19:18:39 +0000

Imagine spending 30 minutes filling out a job application, only to be told your submission failed because you entered an invalid email address. The frustration can be overwhelming, especially if the error message is vague and unhelpful. In this article, we'll explore the essential concept of form validation in React, a very important skill for ensuring a smooth user experience in web applications. We'll walk through setting up a form component, implementing validation logic, displaying error messages, and even exploring popular libraries that can simplify the process.

Prerequisites

HTML and CSS knowledge
Javascript fundamentals
Basic react knowledge (Including state management and event handling)

What is Form Validation?

Form validation is a way of ensuring that data entered in a form is accurate, complete, and aligns with specific rules and conditions.

Benefits of form validation

It ensures data integrity and accuracy.
It improves user experience by providing immediate and clear feedback on what needs to be changed.
It prevents users from submitting invalid or harmful data.

Core concepts of form validation

Required fields
Format validation (e.g Email, phone numbers)
Length Validation (Minimum and Maximum characters)
Pattern validation (passwords)
Custom validation logic (Specific rules based on the application's needs)

In this article, we're going to be considering the first four.

Different approaches to form validation in react

Using built-in HTML5 validation attributes.
Implementing custom validation logic in Javascript.
React hooks for state management and validation.
Form Validation libraries like Formik, React Hook Form, Redux Form, etc.

In this article, we'll be using react hooks.

Implementing form validation using react hooks

Before we dive into the implementation, I assume that you have already created your React app. If you haven't, I suggest doing so using Create React App for a quick and easy start. You can set up your project by running the following commands in your terminal:

npx create-react-app dynamic-form
cd dynamic-form
npm start

Once your app is up and running, we can proceed to create the form component.

Creating the form component

First, we'll set up the basic form structure using a functional component. This form should include basic inputs like username, email address, and password, which we will validate.

In your src folder, create a file called DynamicForm.js (or whatever you wish to call it), and create a component using the same name.

import React from "react";

function DynamicForm() {
  return (
    <div>
      <h1>Dynamic Form</h1>
    </div>
  );
}

export default DynamicForm;

NB: Clean up the app.js file and import the DynamicForm component there to display the component.
Your app.js file should look like this:

import "./App.css";
import DynamicForm from "./DynamicForm";

function App() {
  return (
    <div className="App">
      <DynamicForm />
    </div>
  );
}

export default App;

Next, we'll create our form component with the basic inputs

import React from "react";

function DynamicForm() {
  return (
    <div>
      <h1>Dynamic Form</h1>
      <form action="">
        <div>
          <label htmlFor="username">Username</label>
          <br />
          <input type="text" name="name" placeholder="name" />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <br />
          <input type="text" name="email" placeholder="email" />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <br />
          <input type="text" name="password" placeholder="********" />
        </div>
        <div>
          <label htmlFor="confirmPassword">Password</label>
          <br />
          <input type="text" name="confirmPassword" placeholder="********" />
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default DynamicForm;

Next, we'll initialize state for our form fields using the useState Hook

import React, { useState } from "react";

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

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  });
  const [isFormValid, setIsFormValid] = useState(false);

  return (
    <div>
      <h1>Dynamic Form</h1>
      <form action="">
        <div>
          <label htmlFor="username">Username</label>
          <br />
          <input type="text" name="name" placeholder="name" />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <br />
          <input type="text" name="email" placeholder="email" />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <br />
          <input type="text" name="password" placeholder="********" />
        </div>
        <div>
          <label htmlFor="confirmPassword">Password</label>
          <br />
          <input type="text" name="confirmPassword" placeholder="********" />
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default DynamicForm;

Next, we'll create an event handler to handle changes made to our inputs, and add the handleChange method to our inputs.

import React, { useState } from "react";

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

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  });
  const [isFormValid, setIsFormValid] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };
  return (
    <div>
      <h1>Dynamic Form</h1>
      <form action="">
        <div>
          <label htmlFor="username">Username</label>
          <br />
          <input
            type="text"
            name="name"
            placeholder="name"
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <br />
          <input
            type="text"
            name="email"
            placeholder="email"
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <br />
          <input
            type="text"
            name="password"
            placeholder="********"
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="confirmPassword">Password</label>
          <br />
          <input
            type="text"
            name="confirmPassword"
            placeholder="********"
            onChange={handleChange}
          />
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default DynamicForm;

Next, we'll define the function that validates the inputs. We can call that validateField. It will take two parameters: name and value.

  const validateField = (name, value) => {};

Now, we'll set validation conditions for the inputs. These are the conditions we'll set:

Username must be 3 characters and above.
Email must be a valid email address.
Password must be more than 8 characters and contain a number.
Confirm Password must match the password.

We will use the switch operator to set the conditions, for a simpler format.

import React, { useState } from "react";

function DynamicForm() {
  const [errors, setErrors] = useState({});
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  });
  const [isFormValid, setIsFormValid] = useState(false);

  const validateField = (name, value) => {
    const validationErrors = { ...errors };

    switch (name) {
      case "name":
        if (value.length < 3) {
          validationErrors.name = "Name must be more than 3 characters.";
        } else {
          delete validationErrors.name;
        }
        break;

      case "email":
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
          validationErrors.email = "Email is not valid";
        } else {
          delete validationErrors.email;
        }
        break;

      case "password":
        if (value.length < 8) {
          validationErrors.password = "Password must be more than 8 characters";
        } else if (!/\d/.test(value)) {
          validationErrors.password = "Password must contain a number";
        } else {
          delete validationErrors.password;
        }
        break;

      case "confirmPassword":
        if (value != formData.password) {
          validationErrors.confirmPassword = "Passwords must match";
        } else {
          delete validationErrors.password;
        }
      break;

      default:
        break;
    }
     setErrors(validationErrors)
  };
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };
  return (
    <div>
      <h1>Dynamic Form</h1>
      <form action="">
        <div>
          <label htmlFor="username">Username</label>
          <br />
          <input
            type="text"
            name="name"
            placeholder="name"
            onChange={handleChange}
            value={formData.name}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <br />
          <input
            type="text"
            name="email"
            placeholder="email"
            onChange={handleChange}
            value={formData.email}
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <br />
          <input
            type="password"
            name="password"
            placeholder="********"
            onChange={handleChange}
            value={formData.password}
          />
        </div>
        <div>
          <label htmlFor="confirmPassword">Password</label>
          <br />
          <input
            type="password"
            name="confirmPassword"
            placeholder="********"
            onChange={handleChange}
            value={formData.confirmPassword}
          />
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default DynamicForm;

Now, we've set the conditions, let's add it to the form to make sure the inputs are checked before the form can be submitted.

First, we'll create a handleSubmit function to add to the submit button.

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

Next, we'll use the useEffect hook to manage the validation logic and update the form's validity status when there are changes in the state

  useEffect(() => {
    setIsFormValid(
      Object.keys(errors).length === 0 &&
        formData.name.length >= 3 &&
        /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) &&
        formData.password.length >= 8 &&
        /\d/.test(formData.password) &&
        formData.confirmPassword === formData.password
    );
  }, [errors, formData]);

Don't forget to import useEffect at the top of your file.
Next, add this line to the handleChange function:

 validateField(name, value);

Next, in the input section, we'll add the error messages below the input.

import React, { useState, useEffect } from "react";

function DynamicForm() {
  const [errors, setErrors] = useState({});
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  });
  const [isFormValid, setIsFormValid] = useState(false);

  const validateField = (name, value) => {
    const validationErrors = { ...errors };

    switch (name) {
      case "name":
        if (value.length < 3) {
          validationErrors.name = "Name must be more than 3 characters.";
        } else {
          delete validationErrors.name;
        }
        break;

      case "email":
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
          validationErrors.email = "Email is not valid";
        } else {
          delete validationErrors.email;
        }
        break;

      case "password":
        if (value.length < 8) {
          validationErrors.password = "Password must be more than 8 characters";
        } else if (!/\d/.test(value)) {
          validationErrors.password = "Password must contain a number";
        } else {
          delete validationErrors.password;
        }
        break;

      case "confirmPassword":
        if (value != formData.password) {
          validationErrors.confirmPassword = "Passwords must match";
        } else {
          delete validationErrors.password;
        }
        break;

      default:
        break;
    }

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

  useEffect(() => {
    setIsFormValid(
      Object.keys(errors).length === 0 &&
        formData.name.length >= 3 &&
        /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) &&
        formData.password.length >= 8 &&
        /\d/.test(formData.password) &&
        formData.confirmPassword === formData.password
    );
  }, [errors, formData]);

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

    if (isFormValid) {
      const dataString = `
      Name: ${formData.name}
      Email: ${formData.email}
      Password: ${formData.password}
      Confirm Password: ${formData.confirmPassword}
      `;

      alert(`Form Submitted Successfully!\n${dataString}`);
    }
  };
  return (
    <div>
      <h1>Dynamic Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">Username</label>
          <br />
          <input
            type="text"
            name="name"
            placeholder="name"
            onChange={handleChange}
            value={formData.name}
          />
          {errors.name && <p style={{ color: "red" }}>{errors.name}</p>}
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <br />
          <input
            type="text"
            name="email"
            placeholder="email"
            onChange={handleChange}
            value={formData.email}
          />
          {errors.name && <p style={{ color: "red" }}>{errors.email}</p>}
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <br />
          <input
            type="password"
            name="password"
            placeholder="********"
            onChange={handleChange}
            value={formData.password}
          />
          {errors.name && <p style={{ color: "red" }}>{errors.password}</p>}
        </div>
        <div>
          <label htmlFor="confirmPassword">Password</label>
          <br />
          <input
            type="password"
            name="confirmPassword"
            placeholder="********"
            onChange={handleChange}
            value={formData.confirmPassword}
          />
          {errors.name && (
            <p style={{ color: "red" }}>{errors.confirmPassword}</p>
          )}
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default DynamicForm;

At this point, you should see your error messages as you type in your inputs.

Next, we want to get an alert with the inputs if the form was submitted successfully.
Add this line of code to the handleSubmit function

 if (isFormValid) {
      const dataString = `
      Name: ${formData.name}
      Email: ${formData.email}
      Password: ${formData.password}
      Confirm Password: ${formData.confirmPassword}
      `;

      alert(`Form Submitted Successfully!\n${dataString}`);
    }

Finally, we want to disable the submit button until all fields are valid.

 <button type="submit" disabled={!isFormValid}>
    Submit
 </button>

And everything should work as expected now! You should get your error messages as you type, and they should clear when you meet the conditions.

Libraries that can simplify the process

If you don't want to go through that whole process, here are some form validation libraries you can explore some that can handle it.

Key Takeaways

Importance of Form Validation: Proper validation not only prevents invalid data from being submitted but also guides users in filling out forms correctly, reducing frustration and improving overall satisfaction.
State Management: Utilizing React's useState hook allows us to manage form data and validation errors effectively, providing a seamless user experience.
Real-Time Feedback: Implementing real-time validation enhances user interaction by providing immediate feedback, making forms more intuitive.
Using Libraries: For more complex forms, consider leveraging libraries like Formik or React Hook Form to simplify validation and state management.

Final Thoughts

Form validation is a crucial aspect of web development that every React developer should master. By implementing effective validation strategies, you can create forms that not only function well but also provide a positive experience for users.
I encourage you to experiment with the concepts discussed in this article and explore additional validation techniques and libraries to further enhance your forms.
If you have any questions or would like to share your experiences with form validation in React, feel free to leave a comment below. Happy coding!

Prioritizing Mental Health in Tech Culture

Chinenye Oluyede — Thu, 12 Sep 2024 17:30:11 +0000

Did you know that, in a recent survey, over 52% of tech workers said they've felt overwhelmed, stressed, or burned out? The tech industry is full of brilliant minds, but that drive to innovate can sometimes come at a cost. This article explores the importance of mental health in tech. It also offers tips to help you stay balanced and thrive.

The Hazard

The tech industry is fast and innovative. This puts pressure on the workers to stay on top of all the trends. Let’s have a look at some of the challenges tech workers face:

Long hours and demanding deadlines: The pressure to beat deadlines and deliver results can lead to longer hours and overwhelming deadlines. This can leave workers feeling drained and burnt out.
Always-on work culture: With technology at our fingertips, it's easier to stay connected to our jobs, even when we don't want to. This creates a struggle to switch off and disconnect from work.
Rapid change: The tech industry is always changing. This can be exciting but stressful. Techies need to adapt to new technologies and ways of working.
Fear of failure: The tech industry attracts high achievers. This can create an environment with high expectations and pressure to perform at a top level.
These challenges can have a significant impact on mental well-being.

Let's look at some statistics. They'll help us understand how big mental health concerns are in tech.

Mental Health in Tech by the Numbers

According to The State of Burnout in Tech (2022 edition),

Two out of five of the surveyed workers show a high burnout risk.
62% percent of people feel drained.
42% percent of burned-out professionals are considering quitting their company. They will do so in the next six months.

According to OSMI Data:

51% of tech professionals have received a diagnosis of a mental health condition.
71% of tech workers reported that a mental health issue affects their productivity.
57% of tech industry employees have reported burnout.

The demanding nature of the tech industry can take a toll. Here are some tips to help you manage stress and build resilience.

Practical Steps to Improve Your Mental Health

Create a realistic schedule: Emphasis on “realistic”, because you don’t want to bite more than you can chew. When drafting a schedule, ensure you know how much time you have for work each day or week. Make sure to create little room for overtime. Schedule demanding tasks for when you're most focused. In the morning, you might be better at tackling analytical work that requires concentration. In the afternoon, you might feel more creative and suited for brainstorming sessions. When creating your schedule, set demanding tasks apart. Then, add breaks for movement, healthy snacks, or chatting with colleagues.
Set boundaries: Setting boundaries creates healthy limits between work and personal life. This could involve turning off notifications after work. Or, it could involve declining requests that would disrupt your schedule. When you value your time and set boundaries, you'll be more focused and productive at work. Communicate your boundaries to colleagues and managers. If you respect your boundaries, others are more likely to do the same.
Prioritize time for rest: Make sure to schedule rest to let your brain recharge and refocus. Maintain a consistent sleep routine to ensure adequate rest. Aim for 7-9 hours of sleep per night.
Take breaks: Integrate short breaks throughout your workday to recharge. Step away from your work area, stretch, drink water, or take a brief walk. Take regular vacation days to completely disconnect from work and rejuvenate.
Practice self-care: Regularly engage in actions that nourish your mind and body. Engage in hobbies you enjoy, like reading, playing music, or spending time in nature. Focus on healthy eating habits to fuel your brain and body. Eat plenty of fruits, vegetables, and whole grains. Use mental health resources, like therapy or counselling. Your employer may provide them. You can also find them externally.
Build a support system: Surround yourself with positive and supportive people at work. Chat with friends, join an employee resource group, or find a mentor who can offer guidance and support. Don't hesitate to reach out to a therapist or counselor if you're struggling. There's no shame in seeking professional help for your mental health!

Making these changes can make a real difference in your mental well-being. A healthier mind will benefit you and make you a more effective tech professional.

Benefits of prioritizing your mental health.

Sustained productivity and performance: Like any machine, our brains need breaks to function well. Chronic stress and burnout can decrease focus, creativity, and problem-solving abilities. Prioritizing mental health helps you stay sharp and energized for the long haul.
Improved Decision-Making: When stressed or burnt out, our judgment can become clouded. Putting mental health first helps you face challenges with a clear head. It lets you make better choices for yourself and your projects.
Stronger Relationships: Constant pressure can strain your patience and emotions. Prioritizing mental health lets you build better relationships with colleagues. It helps you avoid conflicts from stress.
Overall Well-being: Mental health is as important as physical health. By taking care of yourself mentally, you'll feel better equipped to handle the demands of work and life in general.

The tech industry is full of brilliant minds. By prioritizing mental well-being, you help yourself and set an example for your colleagues. Together, we can create a culture that values mental health and empowers everyone to thrive.