Project: "Registration Form"

Objective: Create a registration form with validation for each field.

Description: In this project, you will build a registration form that collects user input and validates it before submission. This will help you practice creating controlled components, implementing form validation, and handling form submissions in React.

Instructions:

Step 1: Setup Your Project

• Create a new React project using Vite.
• Set up your project structure with a main <strong>App</strong> component and a <strong>RegistrationForm</strong> component.

Step 2: Create Controlled Components

Create state variables to manage the values of the form fields: <strong>username</strong>, <strong>email</strong>, <strong>password</strong>, and <strong>confirmPassword</strong>.

Hint: Use the <strong>useState</strong> hook to create state variables and update them on input changes.

import React, { useState } from 'react';

function RegistrationForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  function handleChange(event) {
    const { name, value } = event.target;
    if (name === 'username') setUsername(value);
    if (name === 'email') setEmail(value);
    if (name === 'password') setPassword(value);
    if (name === 'confirmPassword') setConfirmPassword(value);
  }

  return (
    <div>
      <form>
        <label>
          Username:
          <input type="text" name="username" value={username} onChange={handleChange} />
        </label>
        <label>
          Email:
          <input type="email" name="email" value={email} onChange={handleChange} />
        </label>
        <label>
          Password:
          <input type="password" name="password" value={password} onChange={handleChange} />
        </label>
        <label>
          Confirm Password:
          <input type="password" name="confirmPassword" value={confirmPassword} onChange={handleChange} />
        </label>
      </form>
    </div>
  );
}

export default RegistrationForm;

Step 3: Validate Form Fields

Implement basic validation for the form fields. Ensure that the <strong>username</strong> and <strong>password</strong> fields are not empty, that the <strong>email</strong> field contains a valid email address, and that the <strong>password</strong> and <strong>confirmPassword</strong> fields match.

Hint: Create a function called <strong>validateForm</strong> that checks for validation errors and updates the <strong>errors</strong> state.

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

function validateForm() {
  const newErrors = {};
  if (!username) newErrors.username = 'Username is required.';
  if (!email.includes('@')) newErrors.email = 'Please enter a valid email address.';
  if (!password) newErrors.password = 'Password is required.';
  if (password !== confirmPassword) newErrors.confirmPassword = 'Passwords do not match.';
  return newErrors;
}

Step 4: Handle Form Submission

Create a <strong>handleSubmit</strong> function to handle form submission. This function should prevent the default form submission behavior, validate the form fields, and display appropriate error messages or a success message.

Hint: Use <strong>preventDefault</strong> to stop the form from submitting and check for validation errors before proceeding.

function handleSubmit(event) {
  event.preventDefault();
  const validationErrors = validateForm();
  if (Object.keys(validationErrors).length > 0) {
    setErrors(validationErrors);
  } else {
    setErrors({});
    alert('Registration submitted successfully!');
    // Handle form submission logic here (e.g., send data to server)
  }
}

Step 5: Display Validation Errors

Display validation error messages below each form field if there are validation errors.

Hint: Use conditional rendering to display error messages only when there are errors.

return (
  <div>
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" name="username" value={username} onChange={handleChange} />
        {errors.username && <p style={{ color: 'red' }}>{errors.username}</p>}
      </label>
      <label>
        Email:
        <input type="email" name="email" value={email} onChange={handleChange} />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </label>
      <label>
        Password:
        <input type="password" name="password" value={password} onChange={handleChange} />
        {errors.password && <p style={{ color: 'red' }}>{errors.password}</p>}
      </label>
      <label>
        Confirm Password:
        <input type="password" name="confirmPassword" value={confirmPassword} onChange={handleChange} />
        {errors.confirmPassword && <p style={{ color: 'red' }}>{errors.confirmPassword}</p>}
      </label>
      <button type="submit">Register</button>
    </form>
  </div>
);

Step 6: Style the Registration Form

Add some basic CSS to style your registration form and make it visually appealing.

Hint: Use CSS to style the form elements, error messages, and the submit button.

/* Add to your RegistrationForm.css file */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}

input {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  color: red;
  font-size: 12px;
  margin: 0;
}

Complete Code Example:

Here's how your complete <strong>RegistrationForm</strong> component might look:

By completing this project, you'll gain hands-on experience with creating controlled components, validating form data, and handling form submissions in React. Enjoy building your Registration Form and making it robust and user-friendly!