Form Validation
Relevant source files
The following files were used as context for generating this wiki page:Introduction
Form validation in this project is a client-side mechanism designed to ensure data integrity before the user can proceed through the multi-step form. The validation logic is centralized within the main MultiStepForm component and is executed on a per-step basis. When a user attempts to navigate to the next step, the current step's data is validated. If any validation rules fail, error messages are displayed inline, and navigation is blocked until the errors are corrected.
The system uses a shared state for form data and validation errors, which is managed by the parent MultiStepForm component and passed down to each step's child component. This ensures a consistent state management and validation experience across the entire form submission process.
Validation Architecture
The core of the validation system resides in the MultiStepForm.jsx component. It orchestrates the state management, validation logic, and step navigation.
-
State Management:
formData: A state object that holds all the input values from all steps of the form.errors: A state object that holds validation error messages. The keys of this object correspond to thenameattribute of the input fields.step: A state variable that tracks the current active step in the form.
-
Core Logic:
validateStep(step): This is the primary function for validation. It takes the current step number as an argument and runs a set of rules against theformDataobject. It returnstrueif all checks pass for that step, andfalseotherwise.handleNext(): This function is called when the user clicks the "NEXT" button. It first callsvalidateStep()to check the current step's data. Only if validation is successful does it increment thestepstate to move to the next form section.handleChange(e): This function updates theformDatastate as the user types. Crucially, it also clears the error message for the specific field being changed, providing real-time feedback that the user is addressing the error.
Sources: src/components/MultiStepForm.jsx:12-53
Validation Flow
The following diagram illustrates the sequence of events when a user tries to proceed to the next step.
This diagram shows the user interaction triggering handleNext, which in turn calls validateStep. Based on the result, it either updates the errors state or advances the form to the next step.
Sources: src/components/MultiStepForm.jsx:29-33, src/components/formsteps/PersonalInfo.jsx:45-47
Step-Specific Validation Rules
Validation rules are defined within the validateStep function and are segmented by the step number.
Step 1: Personal Information
The first step validates the user's basic contact details.
| Field | Validation Rule | Error Message |
|---|---|---|
name | Must not be empty/whitespace. | "Name is required" |
email | Must not be empty and must match a standard email regex (/\S+@\S+\.\S+/). | "Email is required", "Email is invalid" |
phoneNumber | Must not be empty and must be exactly 10 digits (/^\d{10}$/). | "Phone Number is required", "Enter 10 digit phone Number" |
Sources: src/components/MultiStepForm.jsx:57-69
Step 2: Address Details
The second step validates the user's physical address.
| Field | Validation Rule | Error Message |
|---|---|---|
address | Must not be empty/whitespace. | "Address is required" |
city | Must not be empty/whitespace. | "City is required" |
state | Must not be empty/whitespace. | "State is required" |
postalCode | Must not be empty and must be 5 or 6 digits (/^\d{5,6}$/). | "Postal Code is required", "Postal Code is invalid" |
Sources: src/components/MultiStepForm.jsx:72-84
Step 3: Payment Information
The third step validates the user's payment card details.
| Field | Validation Rule | Error Message |
|---|---|---|
cardNumber | Must not be empty and must be exactly 16 digits (/^\d{16}$/). | "Card Number is required", "Enter 16 Digit Card Number" |
expiryDateMonth | Must not be empty. | "Expiry Month is required" |
expiryDateYear | Must not be empty. | "Expiry Year is required" |
cvv | Must not be empty and must be exactly 3 digits (/^\d{3}$/). | "CVV is required", "CVV is invalid" |
Sources: src/components/MultiStepForm.jsx:87-100
UI Error Display
Validation errors are communicated to the user by passing the errors state object as a prop to each step component (PersonalInfo, AddressDetails, PaymentInfo).
Inside each component, the presence of an error for a specific field triggers two UI changes:
- A CSS class
error-inputis applied to the input field, which adds a red border. - A
<p>tag with the classerror-textis rendered below the input, displaying the corresponding error message in red text.
This is a consistent pattern across all form step components.
// Example from PersonalInfo.jsx
<div className="form-group">
<label>Name</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className={errors.name ? "error-input" : ""}
/>
{errors.name && <p className="error-text">{errors.name}</p>}
</div>
Sources: src/components/formsteps/PersonalInfo.jsx:15-18, src/components/formsteps/AddressDetails.jsx:20-23, src/components/formsteps/PaymentInfo.jsx:31-34
The styles for these error states are defined in Form.css.
/* src/styles/Form.css:101-109 */
.error-input {
border: 1px solid red;
}
.error-text {
color: red;
font-size: 12px;
text-align: justify;
margin: 0px;
}
Sources: src/styles/Form.css:101-109
Final Submission Validation
Before the form data is submitted to Firebase, a final validation check is performed within the handleSubmit function. It calls validateStep(step) one last time. Although the final "Review & Submit" screen is step 4, the validation logic in validateStep does not have a case for step === 4. This implies that the validation check inside handleSubmit re-validates the data from the last step with inputs (Step 3, Payment Info) before proceeding with the submission.
This flowchart shows the logic within the handleSubmit function, which includes a final validation check before attempting to save the data.
Sources: src/components/MultiStepForm.jsx:105-108, src/components/formsteps/ReviewSubmit.jsx:51-55
Summary
The form validation system is a robust, step-based, client-side implementation. It is centrally managed in the MultiStepForm component, ensuring that business rules are applied consistently. The architecture provides immediate and clear feedback to the user by highlighting invalid fields and displaying descriptive error messages, preventing the submission of incomplete or incorrectly formatted data. The separation of validation logic from the UI components for each step results in a clean and maintainable codebase.