Project Report: React Registration Form
1. Introduction
This project involves designing and implementing a dynamic registration form using React.
The form collects user input for name, email, and password while enforcing validation rules.
Key features include email format validation, minimum password length enforcement, error
messages, visual cues (such as red borders for invalid fields), and a “Show Password”
toggle. Client-side sanitization is also implemented to ensure clean input.
2. Objective
● Build a React-based registration form with fields for Name, Email, and Password.
● Validate input fields: Ensure all fields are filled, verify that the email follows the
correct format, and enforce a minimum password length.
● Enhance user experience: Display error messages and visual cues for invalid
inputs, and add a “Show Password” feature.
● Prevent form submission until all fields pass validation, and optionally log or
display the entered data upon successful submission.
3. Methodology
Step 1: Project Setup
Create the React Application:
Use the command:
bash
CopyEdit
npx create-react-app react-form
● This sets up a new React project in the react-form folder.
Navigate to the Project Directory:
bash
CopyEdit
cd react-form
●
Step 2: Folder Structure
● Inside the src folder, create a directory named components.
● In the components folder, create a file named Form.js to hold the registration form
component.
● Create a CSS file Form.css in the same folder to manage component-specific
styles.
Step 3: Code Implementation
● Form Component (Form.js):
○ Import React and necessary hooks (useState, useEffect,
useCallback).
○ Create a stateful component to manage form data, errors, and a toggle for
showing the password.
○ Validate inputs (name must not be empty, email must match a pattern, and
password must be at least 6 characters long).
○ Display error messages and highlight invalid fields.
○ Prevent form submission until all fields pass validation.
○ Optionally, log or display the submitted data.
Example snippet:
javascript
CopyEdit
import React, { useState, useEffect, useCallback } from 'react';
import './Form.css';
const Form = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
});
const [errors, setErrors] = useState({
name: '',
email: '',
password: '',
});
const [showPassword, setShowPassword] = useState(false);
const [isFormValid, setIsFormValid] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevState) => ({
...prevState,
[name]: value.trim(),
}));
};
const validateForm = useCallback(() => {
let isValid = true;
const newErrors = { name: '', email: '', password: '' };
if (!formData.name) {
newErrors.name = 'Name is required.';
isValid = false;
}
const emailPattern =
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!formData.email || !emailPattern.test(formData.email)) {
newErrors.email = 'Please enter a valid email address.';
isValid = false;
}
if (!formData.password) {
newErrors.password = 'Password is required.';
isValid = false;
} else if (formData.password.length < 6) {
newErrors.password = 'Password must be at least 6 characters
long.';
isValid = false;
}
setErrors(newErrors);
setIsFormValid(isValid);
}, [formData]);
useEffect(() => {
validateForm();
}, [formData, validateForm]);
const handleSubmit = (e) => {
e.preventDefault();
if (isFormValid) {
console.log('Form Data:', formData);
// Optionally, display a success message or clear the form
setFormData({
name: '',
email: '',
password: '',
});
}
};
return (
<div className="form-container">
<h2 className="form-title">Registration Form</h2>
<form onSubmit={handleSubmit} className="form">
<div className="form-group">
<label htmlFor="name" className="form-label">Name</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
className={`form-input ${errors.name ? 'error' : ''}`}
placeholder="Enter your name"
/>
{errors.name && <div
className="error-message">{errors.name}</div>}
</div>
<div className="form-group">
<label htmlFor="email"
className="form-label">Email</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className={`form-input ${errors.email ? 'error' : ''}`}
placeholder="Enter your email"
/>
{errors.email && <div
className="error-message">{errors.email}</div>}
</div>
<div className="form-group">
<label htmlFor="password"
className="form-label">Password</label>
<input
type={showPassword ? 'text' : 'password'}
id="password"
name="password"
value={formData.password}
onChange={handleChange}
className={`form-input ${errors.password ? 'error' :
''}`}
placeholder="Enter your password"
/>
{errors.password && <div
className="error-message">{errors.password}</div>}
</div>
<div className="form-group password-toggle">
<label>
<input
type="checkbox"
checked={showPassword}
onChange={() => setShowPassword(!showPassword)}
/>
Show Password
</label>
</div>
<div className="form-group">
<button type="submit" className="form-submit"
disabled={!isFormValid}>
Submit
</button>
</div>
</form>
</div>
);
};
export default Form;
●
Step 4: Integration into the App
Modify App.js:
Import and use the Form component.
javascript
CopyEdit
// App.js
import React from 'react';
import Form from './components/Form';
import './App.css';
function App() {
return (
<div className="App">
<Form />
</div>
);
}
export default App;
●
Step 5: Styling the Application
App.css:
Add CSS styles in src/App.css for an appealing layout:
css
CopyEdit
.form-container {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-title {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.form {
display: flex;
flex-direction: column;
}
.form-group {
margin-bottom: 15px;
}
.form-label {
font-size: 14px;
font-weight: 600;
color: #555;
}
.form-input {
width: 100%;
padding: 12px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.form-input.error {
border-color: red;
}
.error-message {
color: red;
font-size: 12px;
margin-top: 5px;
}
.password-toggle {
margin-bottom: 20px;
}
.form-submit {
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-submit:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.form-submit:hover:not(:disabled) {
background-color: #45a049;
}
●
Step 6: Running the Application
1. Open your terminal in the project directory (react-form).
Run:
bash
CopyEdit
npm start
2.
3. The app should open in your default web browser at http://localhost:3000,
and you should see the registration form functioning as expected.
4. Results and Observations
● Form Functionality: The form validates the input for name, email, and password
before allowing submission.
● Error Handling: Invalid inputs are highlighted with red borders and corresponding
error messages.
● User Experience: The “Show Password” toggle enhances usability.
● Data Handling: Upon successful submission, the form logs the entered data (this
can be further developed to send data to a server).
5. Conclusion
The project successfully demonstrates how to build a dynamic, interactive registration form
using React. By employing component composition, props, and hooks like useState and
useEffect, the application ensures a smooth user experience with real-time validations.
The project has reinforced my understanding of React fundamentals and state management.
Further improvements could include integrating backend services for data storage and
enhancing the UI/UX.
