Error Handling

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/MultiStepForm.jsx
• src/components/formsteps/ReviewSubmit.jsx
• src/components/formsteps/PersonalInfo.jsx
• src/components/formsteps/AddressDetails.jsx
• src/components/formsteps/PaymentInfo.jsx
• src/styles/Form.css
• src/firebase.js
• package.json

Introduction

The error handling mechanism in this multi-step form is designed to provide immediate, client-side feedback to the user, ensuring data integrity before submission. It operates on a per-step basis, validating fields as the user attempts to proceed. This is managed within the main MultiStepForm component, which holds the validation logic and error state.

Upon final submission, the system also handles potential asynchronous errors from the backend service (Firebase). User notifications for both success and failure scenarios are managed using the react-toastify library, providing a clear and non-disruptive user experience.

Core Components of Error Handling

The error handling architecture is centered in the MultiStepForm.jsx component and propagated to individual form step components.

Error State Management

A central errors state object is maintained in the MultiStepForm component to track validation errors across all form fields.

• Initialization: The state is initialized as an empty object using the useState hook.

  // src/components/MultiStepForm.jsx:27
  const [errors, setErrors] = useState({});
  

• Population: The validateStep function populates this object with error messages if validation fails for the current step.
• Clearing: Errors for a specific field are cleared as the user types, providing real-time feedback. This is handled in the handleChange function.

  // src/components/MultiStepForm.jsx:44-47
  setErrors({
    ...errors,
    [e.target.name]: "", // Clear errors on change
  });
  

Sources: src/components/MultiStepForm.jsx:27, 41-48

Client-Side Validation Logic

Validation is triggered by the handleNext function, which calls validateStep before allowing navigation to the subsequent step. The validateStep function contains all the validation rules for the form.

This diagram illustrates the flow when a user clicks the "NEXT" button.

Validation Rules

The validation rules are defined within the validateStep function and are specific to each step of the form.

Step	Field	Rule	Error Message
1	name	Must not be empty/whitespace.	"Name is required"
1	email	Must not be empty and must match email format (/\S+@\S+\.\S+/).	"Email is required", "Email is invalid"
1	phoneNumber	Must not be empty and must be 10 digits (/^\d{10}$/).	"Phone Number is required", "Enter 10 digit phone Number"
2	address	Must not be empty/whitespace.	"Address is required"
2	city	Must not be empty/whitespace.	"City is required"
2	state	Must not be empty/whitespace.	"State is required"
2	postalCode	Must not be empty and must be 5-6 digits (/^\d{5,6}$/).	"Postal Code is required", "Postal Code is invalid"
3	cardNumber	Must not be empty and must be 16 digits (/^\d{16}$/).	"Card Number is required", "Enter 16 Digit Card Number"
3	expiryDateMonth	Must be selected.	"Expiry Month is required"
3	expiryDateYear	Must be selected.	"Expiry Year is required"
3	cvv	Must not be empty and must be 3 digits (/^\d{3}$/).	"CVV is required", "CVV is invalid"

Sources: src/components/MultiStepForm.jsx:52-117

Displaying Errors in the UI

The errors state object is passed as a prop to each form step component (PersonalInfo, AddressDetails, PaymentInfo). These components then conditionally render the error messages and apply specific CSS classes to highlight invalid fields.

A typical implementation in a step component looks like this:

// src/components/formsteps/PersonalInfo.jsx:16-19
<input
  type="text"
  name="name"
  // ...
  className={errors.name ? "error-input" : ""}
/>
{errors.name && <p className="error-text">{errors.name}</p>}

The visual styling for these errors is defined in Form.css.

• .error-input: Applies a red border to the input field.
• .error-text: Styles the error message text (red color, small font size).

Sources: src/components/formsteps/PersonalInfo.jsx:18-20, src/components/formsteps/AddressDetails.jsx:20, 32, 44, 56, src/components/formsteps/PaymentInfo.jsx:31, 67, 69, 83, src/styles/Form.css:101-109

Asynchronous Submission Handling

Error handling for the final submission to Firebase is managed within the handleSubmit function in MultiStepForm.jsx.

• Loading State: A loading state is set to true at the beginning of the submission process to disable the "SUBMIT" button and display a spinner, preventing multiple submissions.
• Try/Catch Block: The call to addDoc to save the form data to Firestore is wrapped in a try...catch block.
• Notifications: The react-toastify library is used to display notifications.
  • On success, toast.success() is called.
  • On failure, toast.error() is called with the error message from the catch block.
• Finally Block: A finally block ensures the loading state is set back to false regardless of the submission's outcome.

The sequence diagram below shows the interaction during form submission.

Summary

The project implements a robust, user-centric error handling strategy. It combines synchronous, client-side validation at each step with asynchronous error handling for the final data submission. By leveraging component state for tracking errors, CSS for visual feedback, and a notification library for communicating submission status, the application provides a clear and guided experience for the user, minimizing invalid data entries.