React JS Tutorial: Form Validation Basics 🎯

Welcome to our React JS tutorial on Form Validation! In this lesson, we'll dive into the world of form handling, focusing on validating user inputs. Let's get started!

What is Form Validation? 📝

Form validation is the process of checking user inputs in a form to ensure they meet specific criteria before submitting the form. Validation helps to maintain the quality of user-entered data and prevents errors in your application.

Why Do We Need Form Validation? 💡

Form validation is essential for various reasons:

Ensuring Data Quality: Validation helps to guarantee that the user-entered data is correct and meaningful.
Improving User Experience: Validation provides immediate feedback to users, helping them to correct their inputs and reducing frustration.
Preventing Errors: Validation reduces the number of errors that can occur due to incorrect data, leading to a more stable application.

Form Validation in React JS 📝

In React JS, we can validate forms using built-in features, third-party libraries, or custom validation logic. In this lesson, we'll focus on using the built-in Controlled Components feature for form validation.

Creating a Simple Form 📝

Before we dive into validation, let's create a simple form using React JS:

jsx

import React, { useState } from 'react';

function SimpleForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log({ name, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default SimpleForm;

In this example, we create a simple form with name and email inputs. We use the useState hook to manage the state of our inputs and the handleSubmit function to handle the form submission.

Validating Form Inputs 💡

To validate our form inputs, we'll add conditional logic to prevent the form submission if the inputs are invalid.

jsx

import React, { useState } from 'react';

function SimpleForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [formErrors, setFormErrors] = useState({});

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

    const errors = {};

    if (!name.trim()) {
      errors.name = 'Name is required';
    }

    if (!email.trim() || !/\S+@\S+\.\S+/.test(email)) {
      errors.email = 'Email is invalid';
    }

    setFormErrors(errors);

    if (Object.keys(errors).length === 0) {
      console.log({ name, email });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
        {formErrors.name && <span>{formErrors.name}</span>}
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
        {formErrors.email && <span>{formErrors.email}</span>}
      </label>
      <button type="submit" disabled={Object.keys(formErrors).length > 0}>Submit</button>
    </form>
  );
}

export default SimpleForm;

In this updated example, we add a new state, formErrors, to store the validation errors. We use conditional logic to check the validity of the inputs and add errors to the formErrors object if necessary. Finally, we display the error messages below the inputs and disable the submit button if there are any errors.

Quiz 🎯

And that's it for our first lesson on React JS Form Validation Basics! In the next lesson, we'll dive deeper into advanced form validation techniques and explore some popular third-party libraries. Stay tuned! 🎯