From 8bd8aa2aa41155c438e2cf02ab43be94c6017535 Mon Sep 17 00:00:00 2001
From: Jay Giang <jayhgiang@gmail.com>
Date: Mon, 9 Jun 2025 13:13:19 -0700
Subject: [PATCH 1/4] Update lesson-2 and lesson-5 to enhance form validation
 by standardizing aria-describedby attributes

---
 docs/learn/lesson-2.mdx |  28 +--
 docs/learn/lesson-5.mdx | 539 ++++++++++++++++++++++++----------------
 2 files changed, 332 insertions(+), 235 deletions(-)

diff --git a/docs/learn/lesson-2.mdx b/docs/learn/lesson-2.mdx
index 03fb874..af2dafc 100644
--- a/docs/learn/lesson-2.mdx
+++ b/docs/learn/lesson-2.mdx
@@ -65,7 +65,7 @@ These components work together to create accessible, well-structured forms that
       name="tripDate"
       defaultValue={formData.tripDate}
       onChange={handleDateChange}
-      aria-describedby="tripDateHint"
+      aria-describedby="tripDate-hint"
       required
     />
     <span id="tripDateHint" className="usa-sr-only">
@@ -162,9 +162,9 @@ Let's add the `TimePicker` input below the `DatePicker` form group:
     minTime="00:00"
     maxTime="23:45"
     step={15}
-    aria-describedby="startTimeHint"
+    aria-describedby="start-time-hint"
   />
-  <span id="startTimeHint" className="usa-sr-only">
+  <span id="start-time-hint" className="usa-sr-only">
     Please enter or select the time you started fishing.
   </span>
 </FormGroup>
@@ -220,14 +220,14 @@ Add the following code below the `TimePicker` form group:
     name="startWeather"
     value={formData.startWeather}
     onChange={handleInputChange}
-    aria-describedby="startWeatherHint"
+    aria-describedby="start-weather-hint"
   >
     <option value="">-Select-</option>
     <option value="Sunny">Sunny</option>
     <option value="Cloudy">Cloudy</option>
     <option value="Rainy">Rainy</option>
   </Select>
-  <span id="startWeatherHint" className="usa-sr-only">
+  <span id="start-weather-hint" className="usa-sr-only">
     Please select the weather conditions at the start of your fishing trip.
   </span>
 </FormGroup>
@@ -240,7 +240,7 @@ Add the following code below the `TimePicker` form group:
 - `onChange={handleInputChange}` uses the standard input handler (already present) because the `Select` component behaves like a standard HTML select element in this regard.
 - We define the available weather options using standard HTML `<option>` tags within the `Select` component. The first option has an empty `value` to represent the default, unselected state.
 
-The complete **Form** will look like this:
+The complete **Form** will look like this: 
 
 ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=272
 // diff-add-start
@@ -259,10 +259,10 @@ The complete **Form** will look like this:
       name="tripDate"
       defaultValue={formData.tripDate}
       onChange={handleDateChange}
-      aria-describedby="tripDateHint"
+      aria-describedby="trip-date-hint"
       required
     />
-    <span id="tripDateHint" className="usa-sr-only">
+    <span id="trip-date-hint" className="usa-sr-only">
       Please enter or select the date of your fishing trip.
     </span>
   </FormGroup>
@@ -278,9 +278,9 @@ The complete **Form** will look like this:
       minTime="00:00"
       maxTime="23:45"
       step={15}
-      aria-describedby="startTimeHint"
+      aria-describedby="start-time-hint"
     />
-    <span id="startTimeHint" className="usa-sr-only">
+    <span id="start-time-hint" className="usa-sr-only">
       Please enter or select the time you started fishing.
     </span>
   </FormGroup>
@@ -293,18 +293,18 @@ The complete **Form** will look like this:
       name="startWeather"
       value={formData.startWeather}
       onChange={handleInputChange}
-      aria-describedby="startWeatherHint"
+      aria-describedby="start-weather-hint"
     >
       <option value="">-Select-</option>
       <option value="Sunny">Sunny</option>
       <option value="Cloudy">Cloudy</option>
       <option value="Rainy">Rainy</option>
     </Select>
-    <span id="startWeatherHint" className="usa-sr-only">
+    <span id="start-weather-hint" className="usa-sr-only">
       Please select the weather conditions at the start of your fishing trip.
     </span>
   </FormGroup>
-</Form>;
+</Form>
 // diff-add-end
 ```
 
@@ -324,7 +324,7 @@ if (Object.keys(newErrors).length === 0) {
     startWeather: formData.startWeather,
     startTime: formData.startTime,
     status: "in-progress",
-    step: 2,
+    step: 2
   });
   //diff-add-end
 }
diff --git a/docs/learn/lesson-5.mdx b/docs/learn/lesson-5.mdx
index 2c759e6..2b8a645 100644
--- a/docs/learn/lesson-5.mdx
+++ b/docs/learn/lesson-5.mdx
@@ -1,308 +1,405 @@
 # Lesson 5: Form Validation
 
-In this lesson, we will implement form validation for all three steps of the trip logging process (Start Trip, Catch Log, and End Trip). This ensures that users provide necessary information in the correct format before proceeding. We'll add validation logic and display error messages using the USWDS `ErrorMessage` component.
+In this lesson, we will implement comprehensive form validation across all three steps of the trip logging process (Start Trip, Catch Log, and End Trip). This ensures users provide accurate, complete information before proceeding to each subsequent step. We'll add validation logic using React state management and display user-friendly error messages using USWDS `ErrorMessage` components.
 
-## Step 1: Set validation errors in Start Trip
+## Step 1: Understanding Form Validation in RADFish Applications
 
-We need to store the validation results in the component's state so we can use them to display error messages.
+Before implementing validation, let's understand the validation patterns used in RADFish applications and how they integrate with React state management.
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 1: Set validation errors */` comment and replace it with the following code:
+### 1.1: Validation Architecture
 
-```jsx
-// filepath: src/pages/StartTrip.jsx
-    const newErrors = validateForm();
-    setErrors(newErrors);
-```
+Form validation in RADFish applications follows a consistent pattern across all form components:
 
-This code calls the `validateForm` function (which we'll enhance later) and updates the `errors` state with the returned error object.
+1. **Validation Functions**: Pure functions that check field values against business rules
+2. **Error State Management**: React state to store and display validation errors
+3. **Submission Prevention**: Block navigation/submission when validation fails
+4. **User Experience**: Clear, accessible error messages using USWDS components
 
-## Step 2: Display Trip Date Error in Start Trip
+### 1.2: Validation Types
 
-Now, let's display an error message if the Trip Date is invalid.
+Our trip logging application uses several validation types:
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 2: Display Trip Date Error */` comment and replace it with the following code:
+- **Required Field Validation**: Ensures essential fields are not empty
+- **Data Type Validation**: Validates numbers, coordinates, and other specific formats
+- **Range Validation**: Ensures numeric values fall within acceptable bounds
+- **Business Logic Validation**: Custom rules specific to fishing trip data
 
-```jsx
-// filepath: src/pages/StartTrip.jsx
-              <ErrorMessage id="tripDate-error-message">
-                {(submitted && errors.tripDate) || "\u00A0"} {/* Non-breaking space for layout */}
-              </ErrorMessage>
-```
+**Key Validation Concepts:**
 
-This uses the `ErrorMessage` component from `@trussworks/react-uswds`. It conditionally renders the error message stored in `errors.tripDate` only if the form has been `submitted` and an error exists for that field. The `\u00A0` (non-breaking space) ensures the layout doesn't shift when there's no error.
+- **Client-Side Validation**: Immediate feedback without server round-trips
+- **Accessible Error Messages**: Screen reader compatible with proper ARIA attributes
+- **Form State Management**: Coordinating validation with React's controlled components
+- **Progressive Enhancement**: Validation works even if JavaScript fails
 
-## Step 3: Display Start Time Error in Start Trip
+## Step 2: Start Trip Form Validation
 
-Similarly, display an error for the Start Time.
+Let's begin by implementing validation for the Start Trip form, which collects the trip date, start time, and weather conditions.
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 3: Display Start Time Error */` comment and replace it with the following code:
-
-```jsx
-// filepath: src/pages/StartTrip.jsx
-              <ErrorMessage id="startTime-error-message">
-                {(submitted && errors.startTime) || "\u00A0"}
-              </ErrorMessage>
-```
+### 2.1: Set Validation Error State
 
-This adds the error message display for the `startTime` field.
+The Start Trip form uses React state to store validation errors. When the form is submitted, we need to validate all fields and update the error state.
 
-## Step 4: Display Weather Error in Start Trip
+Open `src/pages/StartTrip.jsx` and locate the `handleSubmit` function.
 
-Finally, add the error display for the Weather field.
-
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 4: Display Weather Error */` comment and replace it with the following code:
-
-```jsx
-// filepath: src/pages/StartTrip.jsx
-              <ErrorMessage id="weather-error-message">
-                {(submitted && errors.weather) || "\u00A0"}
-              </ErrorMessage>
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=191
+const newErrors = validateForm();
+//diff-add-start
+setErrors(newErrors);
+//diff-add-end
 ```
 
-This completes the error message display for the Start Trip form.
+**Explanation:**
 
-## Step 5: Set validation errors for new catch in Catch Log
+- `validateForm()`: Calls the validation function that checks all form fields
+- `setErrors(newErrors)`: Updates React state with the validation results
+- The form only proceeds if `Object.keys(newErrors).length === 0`
 
-In the Catch Log page, we need to validate the *new* catch form before adding it.
+### 2.2: Required Field Validation Logic
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 5: Set validation errors for new catch */` comment and replace it with the following code:
+The Start Trip form validates three required fields using a standardized validation helper:
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-    const formErrors = validateForm();
-    setErrors(formErrors);
-```
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=172
+// Simple required field validation
+const validateRequired = (value, fieldName) => {
+  if (!value || String(value).trim() === "") {
+    return `${fieldName} is required`;
+  }
+  return null;
+};
 
-This updates the `errors` state specifically for the *new catch* form based on the results of `validateForm`.
+// Validates all fields in the form
+const validateForm = () => {
+  const newErrors = {};
 
-## Step 6: Display Species Error in Catch Log (New Catch)
+  const dateError = validateRequired(formData.tripDate, FIELD_DATE);
+  if (dateError) newErrors.tripDate = dateError;
 
-Display the error message for the Species field in the new catch form.
+  const weatherError = validateRequired(formData.weather, FIELD_WEATHER);
+  if (weatherError) newErrors.weather = weatherError;
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 6: Display Species Error */` comment and replace it with the following code:
+  const timeError = validateRequired(formData.startTime, FIELD_START_TIME);
+  if (timeError) newErrors.startTime = timeError;
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                <ErrorMessage id="species-error-message">
-                  {(submitted && errors.species) || "\u00A0"}
-                </ErrorMessage>
+  return newErrors;
+};
 ```
 
-## Step 7: Display Weight Error in Catch Log (New Catch)
-
-Display the error message for the Weight field in the new catch form.
-
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 7: Display Weight Error */` comment and replace it with the following code:
-
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="weight-error-message">
-                      {(submitted && errors.weight) || "\u00A0"}
-                    </ErrorMessage>
+**Understanding the Validation Pattern:**
+
+- **Helper Function**: `validateRequired()` provides reusable validation logic
+- **Field Constants**: `FIELD_DATE`, `FIELD_WEATHER`, etc. ensure consistent error messages
+- **Error Object**: Returned object maps field names to error messages
+- **Null Returns**: Valid fields return `null` to indicate no errors
+
+### 2.3: Display Error Messages
+
+The Start Trip form displays validation errors using USWDS `ErrorMessage` components. Each form field has an associated error display:
+
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=262
+//diff-remove-start
+<FormGroup>
+//diff-remove-end
+//diff-add-start
+<FormGroup error={submitted && errors.tripDate}>
+//diff-add-end
+  <Label
+    htmlFor="tripDate"
+    //diff-add-start
+    error={submitted && errors.tripDate}
+    //diff-add-end
+    hint=" mm/dd/yyyy"
+    requiredMarker
+  >
+    Date
+  </Label>
+  <DatePicker
+    id="tripDate"
+    name="tripDate"
+    defaultValue={formData.tripDate}
+    onChange={handleDateChange}
+    //diff-add-start
+    validationStatus={submitted && errors.tripDate ? "error" : undefined}
+    //diff-add-end
+    aria-describedby="trip-date-hint trip-date-error-message"
+    required
+  />
+  <span id="trip-date-hint" className="usa-sr-only">
+    Please enter or select the date of your fishing trip.
+  </span>
+  //diff-add-start
+  {submitted && errors.tripDate && (
+         <ErrorMessage id="trip-date-error-message" className="font-sans-2xs">
+      {errors.tripDate}
+    </ErrorMessage>
+  )}
+  //diff-add-end
+</FormGroup>
 ```
 
-## Step 8: Display Length Error in Catch Log (New Catch)
+**Understanding the Error Display Pattern:**
 
-Display the error message for the Length field in the new catch form.
+The diff shows the transformation from a basic form group to a fully validated one:
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 8: Display Length Error */` comment and replace it with the following code:
+- **FormGroup Error State**: `error={submitted && errors.tripDate}` applies USWDS error styling to the entire form group
+- **Label Error Integration**: `error={submitted && errors.tripDate}` on the Label component provides visual error indication
+- **Input Validation Status**: `validationStatus={submitted && errors.tripDate ? "error" : undefined}` adds error styling to the DatePicker
+- **ARIA Accessibility**: `aria-describedby="trip-date-hint trip-date-error-message"` links the input to both hint text and error messages
+- **Conditional Error Messages**: `{submitted && errors.tripDate && (...)}` only displays errors after form submission
+- **Consistent ID Naming**: `id="trip-date-error-message"` follows a consistent kebab-case pattern for error message identification
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="length-error-message">
-                      {(submitted && errors.length) || "\u00A0"}
-                    </ErrorMessage>
-```
+This pattern ensures errors are visually prominent, accessible to screen readers, and only appear when users attempt to submit invalid data.
 
-## Step 9: Display Time Error in Catch Log (New Catch)
+## Step 3: Catch Log Form Validation
 
-Display the error message for the Time field in the new catch form.
+The Catch Log page presents a more complex validation scenario with both a "new catch" form and a list of existing catches that can be edited.
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 9: Display Time Error */` comment and replace it with the following code:
+### 3.1: New Catch Validation
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                <ErrorMessage id="time-error-message">
-                  {(submitted && errors.time) || "\u00A0"}
-                </ErrorMessage>
-```
+The "Add Catch" form validates species, weight, length, time, and optional coordinates before adding to the list.
 
-## Step 10: Display Latitude Error in Catch Log (New Catch)
+Open `src/pages/CatchLog.jsx` and locate the `handleAddCatch` function. Observe how validation is implemented:
 
-Display the error message for the Latitude field (optional field, but validation applies if entered).
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=213
+const handleAddCatch = async (e) => {
+  e.preventDefault();
+  setSubmitted(true);
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 10: Display Latitude Error */` comment and replace it with the following code:
+  const formErrors = validateForm();
+  //diff-add-start
+  setErrors(formErrors);
+  //diff-add-end
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="latitude-error-message">
-                      {(submitted && errors.latitude) || "\u00A0"}
-                    </ErrorMessage>
+  // Proceed only if no errors and tripId exists
+  if (Object.keys(formErrors).length === 0 && tripId) {
+    // Save catch and update UI
+  }
+};
 ```
 
-## Step 11: Display Longitude Error in Catch Log (New Catch)
-
-Display the error message for the Longitude field (optional field, but validation applies if entered).
-
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 11: Display Longitude Error */` comment and replace it with the following code:
-
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="longitude-error-message">
-                      {(submitted && errors.longitude) || "\u00A0"}
-                    </ErrorMessage>
+**Complex Validation Rules:**
+
+The Catch Log uses multiple validation types beyond simple required field checks:
+
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=50
+const validateNumberRange = (value, min, max, fieldName, allowZero = true) => {
+  if (value === "" || value === null || value === undefined) return null;
+  const numValue = Number(value);
+  if (isNaN(numValue)) return `${fieldName} must be a valid number`;
+  if (!allowZero && numValue <= min)
+    return `${fieldName} must be greater than ${min}`;
+  if (allowZero && numValue < min)
+    return `${fieldName} must be at least ${min}`;
+  if (numValue > max) {
+    const minOperator = allowZero ? ">=" : ">";
+    return `${fieldName} must be ${minOperator} ${min} and <= ${max}`;
+  }
+  return null;
+};
+
+const validateLatitude = (value) => {
+  if (value === "" || value === null || value === undefined) return null;
+  const numValue = Number(value);
+  if (isNaN(numValue)) return `${FIELD_LATITUDE} must be a valid number`;
+  if (numValue < -90 || numValue > 90)
+    return `${FIELD_LATITUDE} must be between -90 and 90`;
+  return null;
+};
 ```
 
-## Step 12: Set validation errors for recorded catches in Catch Log
+**Advanced Validation Features:**
 
-Before navigating to the next step (End Trip), we must validate *all* the catches already recorded in the list.
+- **Range Validation**: Weight (0-1000 lbs) and length (0-500 inches) must be within realistic bounds
+- **Coordinate Validation**: Latitude (-90 to 90) and longitude (-180 to 180) follow geographic standards
+- **Optional Field Handling**: Coordinates are validated only if values are provided
+- **Type Coercion**: Automatic conversion from string inputs to numbers
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 12: Set validation errors for recorded catches */` comment and replace it with the following code:
+### 3.2: Recorded Catches Validation
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-    const recordedErrors = validateRecordedCatches();
-    setRecordedCatchErrors(recordedErrors);
-```
-
-This calls a separate validation function (`validateRecordedCatches`) and stores the errors in the `recordedCatchErrors` state, which is structured to hold errors per catch item index.
-
-## Step 13: Display Recorded Species Error in Catch Log (List)
+Before navigating to the End Trip page, all catches in the "Recorded Catches" list must be validated:
 
-Now, we'll add error displays within the list of recorded catches. This is slightly different as we need to access errors based on the catch's index.
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=315
+const handleSubmit = async (e) => {
+  e.preventDefault();
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 13: Display Recorded Species Error */` comment and replace it with the following code:
+  // Validate all recorded catches first
+  const recordedErrors = validateRecordedCatches();
+  //diff-add-start
+  setRecordedCatchErrors(recordedErrors);
+  //diff-add-end
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                            {catchErrors.species && (
-                              <ErrorMessage id={`recorded-species-${index}-error-message`}>
-                                {catchErrors.species}
-                              </ErrorMessage>
-                            )}
+  // Only proceed if there are no errors in the recorded catches list
+  if (Object.keys(recordedErrors).length === 0) {
+    // Navigate to EndTrip page
+    navigate(`/end`, { state: { tripId: tripId } });
+  }
+};
 ```
 
-Here, `catchErrors` is an object containing validation errors for the *current* catch item being rendered in the loop (at `index`). We conditionally render the `ErrorMessage` only if `catchErrors.species` exists.
-
-## Step 14: Display Recorded Weight Error in Catch Log (List)
-
-Add the error display for Weight in the recorded catches list.
-
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 14: Display Recorded Weight Error */` comment and replace it with the following code:
-
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.weight && (
-                                  <ErrorMessage id={`recorded-weight-${index}-error-message`}>
-                                    {catchErrors.weight}
-                                  </ErrorMessage>
-                                )}
+**Multi-Record Validation:**
+
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=173
+const validateRecordedCatches = () => {
+  const allErrors = {};
+  catches.forEach((catchItem, index) => {
+    const catchErrors = {};
+    // Validate each catch using the same rules as new catches
+    catchErrors.species = validateRequired(catchItem.species, FIELD_SPECIES);
+    catchErrors.weight = validateRequired(catchItem.weight, FIELD_WEIGHT);
+    // ... additional validations
+
+    // Only store errors if they exist
+    const filteredCatchErrors = Object.entries(catchErrors).reduce(
+      (acc, [key, value]) => {
+        if (value) acc[key] = value;
+        return acc;
+      },
+      {},
+    );
+
+    if (Object.keys(filteredCatchErrors).length > 0) {
+      allErrors[index] = filteredCatchErrors;
+    }
+  });
+  return allErrors;
+};
 ```
 
-## Step 15: Display Recorded Length Error in Catch Log (List)
-
-Add the error display for Length in the recorded catches list.
-
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 15: Display Recorded Length Error */` comment and replace it with the following code:
-
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.length && (
-                                  <ErrorMessage id={`recorded-length-${index}-error-message`}>
-                                    {catchErrors.length}
-                                  </ErrorMessage>
-                                )}
+### 3.3: Error Display for Recorded Catches
+
+The recorded catches list displays errors with index-specific identifiers:
+
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=580
+{
+  catches.map((catchItem, index) => {
+    const catchErrors = recordedCatchErrors[index] || {};
+
+    return (
+      <div key={catchItem.id || index}>
+        //diff-remove-start
+        <FormGroup>
+        //diff-remove-end
+        //diff-add-start
+        <FormGroup error={!!catchErrors.species}>
+        //diff-add-end
+          <Label
+            htmlFor={`recorded-species-${index}`}
+            //diff-add-start
+            error={!!catchErrors.species}
+            //diff-add-end
+          >
+            Species
+            <span className="text-secondary-vivid margin-left-05">*</span>
+          </Label>
+          <Select
+            id={`recorded-species-${index}`}
+            //diff-add-start
+            validationStatus={catchErrors.species ? "error" : undefined}
+            aria-describedby={`species-hint recorded-species-${index}-error-message`}
+            //diff-add-end
+            // ... other props
+          >
+            {/* options */}
+          </Select>
+          <span id="species-hint" className="usa-sr-only">
+            Please select the species of the catch.
+          </span>
+          //diff-add-start
+          {catchErrors.species && (
+            <ErrorMessage id={`recorded-species-${index}-error-message`}>
+              {catchErrors.species}
+            </ErrorMessage>
+          )}
+          //diff-add-end
+        </FormGroup>
+      </div>
+    );
+  });
+}
 ```
 
-## Step 16: Display Recorded Time Error in Catch Log (List)
+## Step 4: Apply Validation to End Trip (Practice Exercise)
 
-Add the error display for Time in the recorded catches list.
+Now it's your turn! Apply the validation patterns you've learned to the End Trip form. This form needs validation for the trip's end time and weather conditions before allowing users to review their complete trip data.
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 16: Display Recorded Time Error */` comment and replace it with the following code:
+### 4.1: Your Task
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                            {catchErrors.time && (
-                              <ErrorMessage id={`recorded-time-${index}-error-message`}>
-                                {catchErrors.time}
-                              </ErrorMessage>
-                            )}
-```
+Open `src/pages/EndTrip.jsx` and apply the same validation patterns you learned from the Start Trip and Catch Log forms.
 
-## Step 17: Display Recorded Latitude Error in Catch Log (List)
+**What you need to do:**
 
-Add the error display for Latitude in the recorded catches list.
+1. **Set validation errors** in the `handleSubmit` function
+2. **Add error display** for the end time field
+3. **Add error display** for the end weather field
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 17: Display Recorded Latitude Error */` comment and replace it with the following code:
+### 4.2: Hints for Implementation
 
+**For setting validation errors:**
 ```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.latitude && (
-                                  <ErrorMessage id={`recorded-latitude-${index}-error-message`}>
-                                    {catchErrors.latitude}
-                                  </ErrorMessage>
-                                )}
+// Hint: Use the same pattern as Start Trip
+const newErrors = validateForm();
+// Add your code here to update the errors state
 ```
 
-## Step 18: Display Recorded Longitude Error in Catch Log (List)
-
-Add the error display for Longitude in the recorded catches list.
-
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 18: Display Recorded Longitude Error */` comment and replace it with the following code:
-
+**For displaying error messages:**
 ```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.longitude && (
-                                  <ErrorMessage id={`recorded-longitude-${index}-error-message`}>
-                                    {catchErrors.longitude}
-                                  </ErrorMessage>
-                                )}
+// Hint: Follow the same pattern as previous forms
+// Remember to:
+// - Add error prop to FormGroup
+// - Add error prop to Label  
+// - Add validationStatus to the input component
+// - Add conditional ErrorMessage component
 ```
 
-## Step 19: Set validation errors in End Trip
+### 4.3: Check Your Work
 
-Move to the final form step. We need to set the validation errors when submitting the End Trip form.
+After implementing validation:
 
-Open `src/pages/EndTrip.jsx`. Locate the `/* Step 19: Set validation errors */` comment and replace it with the following code:
+1. Navigate to `/end` (after completing previous steps)
+2. Click "Next" without filling any fields
+3. You should see error messages for both End Time and End Weather
+4. Fill in the fields - errors should disappear
+5. Form should proceed to Review page when valid
 
-```jsx
-// filepath: src/pages/EndTrip.jsx
-    const newErrors = validateForm();
-    setErrors(newErrors);
-```
+**Expected Behavior:**
+- ✅ Error messages appear only after clicking "Next" 
+- ✅ Error styling applied to FormGroup, Label, and input components
+- ✅ Screen readers can access error messages via `aria-describedby`
+- ✅ Navigation blocked until all fields are valid
 
-## Step 20: Display End Time Error in End Trip
+## Step 5: Testing Complete Validation Flow
 
-Display the error message for the End Time field.
+Test the validation system with both invalid and valid data to ensure it works correctly:
 
-Open `src/pages/EndTrip.jsx`. Locate the `/* Step 20: Display End Time Error */` comment and replace it with the following code:
+### 5.1: Complete Validation Test
 
-```jsx
-// filepath: src/pages/EndTrip.jsx
-              <ErrorMessage id="endTime-error-message">
-                {(submitted && errors.endTime) || "\u00A0"}
-              </ErrorMessage>
-```
+1. **Start Trip (`/start`)**:
+   - Try submitting empty form → verify error messages appear
+   - Fill fields correctly → proceeds to Catch Log
 
-## Step 21: Display End Weather Error in End Trip
+2. **Catch Log (`/catch`)**:
+   - Try "Add Catch" with empty fields → verify validation errors
+   - Test invalid coordinates (latitude > 90) → verify range validation
+   - Add valid catches → try "Next" with invalid recorded catches → verify list validation
+   - Ensure all catches are valid → proceeds to End Trip
 
-Display the error message for the End Weather field.
+3. **End Trip (`/end`)**:
+   - Try submitting without end time/weather → verify validation blocks navigation
+   - Fill fields correctly → proceeds to Review page
 
-Open `src/pages/EndTrip.jsx`. Locate the `/* Step 21: Display End Weather Error */` comment and replace it with the following code:
+**Expected Results:**
+- ✅ Errors appear only after submission attempts
+- ✅ Invalid data blocks navigation between steps  
+- ✅ Error styling applied consistently across all forms
+- ✅ Valid data clears errors and allows progression
 
-```jsx
-// filepath: src/pages/EndTrip.jsx
-              <ErrorMessage id="endWeather-error-message">
-                {(submitted && errors.endWeather) || "\u00A0"}
-              </ErrorMessage>
-```
+## Conclusion
 
-# Conclusion
+You have successfully implemented comprehensive form validation across all three steps of the trip logging process! 
 
-You have now implemented validation logic and error message displays across all three form steps (Start Trip, Catch Log, End Trip). This involves:
-*   Defining validation rules (required fields, number ranges, coordinates).
-*   Storing validation results in the component state (`errors` and `recordedCatchErrors`).
-*   Conditionally displaying `ErrorMessage` components based on the submission status and validation results.
-*   Preventing navigation to the next step if validation fails.
+**Key Benefits:**
+- **Data quality**: Ensures complete, accurate trip information
+- **User experience**: Clear guidance when data doesn't meet requirements
+- **Accessibility**: Screen reader compatible with proper labeling
+- **Progressive enhancement**: Validation works even if JavaScript fails
 
-This makes the application more robust by guiding the user to provide complete and correct data. In the next lesson, we'll focus on reviewing the collected data before final submission.
+In the next lesson, we'll implement the review page where users can see all their trip data before final submission.

From ea0504b5c448d9d08b9688bc6eda6a72db465fce Mon Sep 17 00:00:00 2001
From: Jay Giang <jayhgiang@gmail.com>
Date: Mon, 9 Jun 2025 14:04:20 -0700
Subject: [PATCH 2/4] Fix syntax

---
 docs/learn/lesson-5.mdx | 86 ++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/docs/learn/lesson-5.mdx b/docs/learn/lesson-5.mdx
index 2b8a645..fc6ecee 100644
--- a/docs/learn/lesson-5.mdx
+++ b/docs/learn/lesson-5.mdx
@@ -269,52 +269,50 @@ const validateRecordedCatches = () => {
 The recorded catches list displays errors with index-specific identifiers:
 
 ```jsx title="src/pages/CatchLog.jsx" showLineNumbers=580
-{
-  catches.map((catchItem, index) => {
-    const catchErrors = recordedCatchErrors[index] || {};
-
-    return (
-      <div key={catchItem.id || index}>
-        //diff-remove-start
-        <FormGroup>
-        //diff-remove-end
-        //diff-add-start
-        <FormGroup error={!!catchErrors.species}>
-        //diff-add-end
-          <Label
-            htmlFor={`recorded-species-${index}`}
-            //diff-add-start
-            error={!!catchErrors.species}
-            //diff-add-end
-          >
-            Species
-            <span className="text-secondary-vivid margin-left-05">*</span>
-          </Label>
-          <Select
-            id={`recorded-species-${index}`}
-            //diff-add-start
-            validationStatus={catchErrors.species ? "error" : undefined}
-            aria-describedby={`species-hint recorded-species-${index}-error-message`}
-            //diff-add-end
-            // ... other props
-          >
-            {/* options */}
-          </Select>
-          <span id="species-hint" className="usa-sr-only">
-            Please select the species of the catch.
-          </span>
+catches.map((catchItem, index) => {
+  const catchErrors = recordedCatchErrors[index] || {};
+
+  return (
+    <div key={catchItem.id || index}>
+      //diff-remove-start
+      <FormGroup>
+      //diff-remove-end
+      //diff-add-start
+      <FormGroup error={!!catchErrors.species}>
+      //diff-add-end
+        <Label
+          htmlFor={`recorded-species-${index}`}
           //diff-add-start
-          {catchErrors.species && (
-            <ErrorMessage id={`recorded-species-${index}-error-message`}>
-              {catchErrors.species}
-            </ErrorMessage>
-          )}
+          error={!!catchErrors.species}
           //diff-add-end
-        </FormGroup>
-      </div>
-    );
-  });
-}
+        >
+          Species
+          <span className="text-secondary-vivid margin-left-05">*</span>
+        </Label>
+        <Select
+          id={`recorded-species-${index}`}
+          //diff-add-start
+          validationStatus={catchErrors.species ? "error" : undefined}
+          aria-describedby={`species-hint recorded-species-${index}-error-message`}
+          //diff-add-end
+          // ... other props
+        >
+          {/* options */}
+        </Select>
+        <span id="species-hint" className="usa-sr-only">
+          Please select the species of the catch.
+        </span>
+        //diff-add-start
+        {catchErrors.species && (
+          <ErrorMessage id={`recorded-species-${index}-error-message`}>
+            {catchErrors.species}
+          </ErrorMessage>
+        )}
+        //diff-add-end
+      </FormGroup>
+    </div>
+  );
+})
 ```
 
 ## Step 4: Apply Validation to End Trip (Practice Exercise)

From e17c115bbac38b923049f4bd39b86c743418f9db Mon Sep 17 00:00:00 2001
From: Jay Giang <jayhgiang@gmail.com>
Date: Tue, 10 Jun 2025 16:17:15 -0700
Subject: [PATCH 3/4] Update showLineNumber values

---
 docs/learn/lesson-1.mdx |  2 +-
 docs/learn/lesson-2.mdx | 14 +++++++-------
 docs/learn/lesson-3.mdx |  2 +-
 docs/learn/lesson-4.mdx | 10 ++++------
 docs/learn/lesson-5.mdx | 31 +++++++++++++++++--------------
 5 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/docs/learn/lesson-1.mdx b/docs/learn/lesson-1.mdx
index c7a185a..1d8adb6 100644
--- a/docs/learn/lesson-1.mdx
+++ b/docs/learn/lesson-1.mdx
@@ -105,7 +105,7 @@ onClick={() => {
 ```
 
 **The complete `Button` component with the new `onClick` handler will look like this:**
-```jsx title="src/pages/Home.jsx" showLineNumbers=293
+```jsx title="src/pages/Home.jsx" showLineNumbers=309
 <Button
   type="button"
   className="bg-primary hover:bg-primary-darker width-full"
diff --git a/docs/learn/lesson-2.mdx b/docs/learn/lesson-2.mdx
index af2dafc..defd750 100644
--- a/docs/learn/lesson-2.mdx
+++ b/docs/learn/lesson-2.mdx
@@ -48,7 +48,7 @@ These components work together to create accessible, well-structured forms that
 
 **Add the `FormGroup`, `Label`, and `DatePicker` input within the `Form` component:**
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=272
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=287
 // diff-add-start
 <Form onSubmit={handleSubmit} large>
   <FormGroup>
@@ -82,7 +82,7 @@ Let's look at two key aspects of how React manages state with this form:
 
 1. **Initial State with `defaultValue`**:
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=289
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=303
    defaultValue={formData.tripDate}
    ```
 
@@ -102,14 +102,14 @@ Let's look at two key aspects of how React manages state with this form:
 
 2. **Updating State with `onChange`**:
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=290
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=304
    onChange = { handleDateChange };
    ```
 
    - The `onChange` attribute is a required prop for controlled inputs. It is called whenever the input's value changes (on every keystroke or selection). Without this handler, React would revert the input to its original value after each change.
    - When a user selects a date, the `handleDateChange` function is called
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=149
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=162
    const handleDateChange = (value) => {
      setFormData((prevData) => ({ ...prevData, tripDate: value || "" }));
    };
@@ -148,7 +148,7 @@ import {
 
 Let's add the `TimePicker` input below the `DatePicker` form group:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=315
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=325
 // diff-add-start
 <FormGroup>
   <Label htmlFor="startTime" className="input-time-label" requiredMarker>
@@ -209,7 +209,7 @@ import {
 
 Add the following code below the `TimePicker` form group:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=352
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=362
 // diff-add-start
 <FormGroup>
   <Label htmlFor="startWeather" requiredMarker>
@@ -316,7 +316,7 @@ Before we learn how to save data to storage in the next lesson, let's first see
 
 Open `src/pages/StartTrip.jsx` and locate the `handleSubmit` function. Replace the existing submission logic with the following code that will log the form data to the console:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=191
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=214
 if (Object.keys(newErrors).length === 0) {
   //diff-add-start
   console.log("Form Data:", {
diff --git a/docs/learn/lesson-3.mdx b/docs/learn/lesson-3.mdx
index 412148c..9f8d740 100644
--- a/docs/learn/lesson-3.mdx
+++ b/docs/learn/lesson-3.mdx
@@ -77,7 +77,7 @@ This schema ensures data consistency and provides validation when we create or u
 
 To save data, we first need to access the appropriate RADFish store and collection within our `handleSubmit` function.
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=202
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=203
 try {
   //diff-add-start
   const tripStore = app.stores["trip"];
diff --git a/docs/learn/lesson-4.mdx b/docs/learn/lesson-4.mdx
index d8f8828..f4e6712 100644
--- a/docs/learn/lesson-4.mdx
+++ b/docs/learn/lesson-4.mdx
@@ -12,7 +12,7 @@ RADFish organizes different types of data into separate **collections**. While o
 
 Open `src/index.jsx` and locate the `collections` section within the trip store. **You'll need to add the Catch collection schema after the Form collection as shown in the highlighted lines below:**
 
-```jsx title="src/index.jsx" showLineNumbers=60
+```jsx title="src/index.jsx" showLineNumbers=66
         },
       },
       // diff-add-start
@@ -91,8 +91,7 @@ First, we need to access the RADFish Catch collection within our form submission
 
 Open `src/pages/CatchLog.jsx` and locate the `handleAddCatch` function. Find the comment `// Create record in RADFish/IndexedDB` and replace it with the following code:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=247
-// Create record in RADFish/IndexedDB
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=265
 // diff-add-start
 await Catch.create(newCatchData);
 // diff-add-end
@@ -111,7 +110,7 @@ After successfully saving to IndexedDB, we need to update React's component stat
 
 In the same `handleAddCatch` function, below the `await Catch.create(newCatchData)`, add the following code:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=250
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=269
 // diff-add-start
 setCatches(prev => [newCatchData, ...prev]);
 // diff-add-end
@@ -133,8 +132,7 @@ This triggers React's re-rendering process, immediately updating the "Recorded C
 
 The complete `handleAddCatch` function also handles form cleanup after successful submission. Here's how the full process works:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=252
-// Reset the form
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=272
 setCurrentCatch({ species: "", weight: "", length: "", latitude: "", longitude: "", time: "" });
 setCatchTimeKey(prevKey => prevKey + 1); // Reset TimePicker
 setSubmitted(false); // Reset submission status
diff --git a/docs/learn/lesson-5.mdx b/docs/learn/lesson-5.mdx
index fc6ecee..7cad0f9 100644
--- a/docs/learn/lesson-5.mdx
+++ b/docs/learn/lesson-5.mdx
@@ -41,11 +41,16 @@ The Start Trip form uses React state to store validation errors. When the form i
 
 Open `src/pages/StartTrip.jsx` and locate the `handleSubmit` function.
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=191
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=190
 const newErrors = validateForm();
-//diff-add-start
-setErrors(newErrors);
-//diff-add-end
+  const handleSubmit = async (e) => {
+    e.preventDefault(); // Prevent default browser form submission
+    setSubmitted(true); // Mark form as submitted to show errors
+
+    //diff-add-start
+    const newErrors = validateForm();
+    setErrors(newErrors);
+    //diff-add-end
 ```
 
 **Explanation:**
@@ -58,8 +63,7 @@ setErrors(newErrors);
 
 The Start Trip form validates three required fields using a standardized validation helper:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=172
-// Simple required field validation
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=166
 const validateRequired = (value, fieldName) => {
   if (!value || String(value).trim() === "") {
     return `${fieldName} is required`;
@@ -95,7 +99,7 @@ const validateForm = () => {
 
 The Start Trip form displays validation errors using USWDS `ErrorMessage` components. Each form field has an associated error display:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=262
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=274
 //diff-remove-start
 <FormGroup>
 //diff-remove-end
@@ -164,8 +168,8 @@ const handleAddCatch = async (e) => {
   e.preventDefault();
   setSubmitted(true);
 
-  const formErrors = validateForm();
   //diff-add-start
+  const formErrors = validateForm();
   setErrors(formErrors);
   //diff-add-end
 
@@ -180,7 +184,7 @@ const handleAddCatch = async (e) => {
 
 The Catch Log uses multiple validation types beyond simple required field checks:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=50
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=42
 const validateNumberRange = (value, min, max, fieldName, allowZero = true) => {
   if (value === "" || value === null || value === undefined) return null;
   const numValue = Number(value);
@@ -217,13 +221,12 @@ const validateLatitude = (value) => {
 
 Before navigating to the End Trip page, all catches in the "Recorded Catches" list must be validated:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=315
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=287
 const handleSubmit = async (e) => {
   e.preventDefault();
 
-  // Validate all recorded catches first
-  const recordedErrors = validateRecordedCatches();
   //diff-add-start
+  const recordedErrors = validateRecordedCatches();
   setRecordedCatchErrors(recordedErrors);
   //diff-add-end
 
@@ -237,7 +240,7 @@ const handleSubmit = async (e) => {
 
 **Multi-Record Validation:**
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=173
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=202
 const validateRecordedCatches = () => {
   const allErrors = {};
   catches.forEach((catchItem, index) => {
@@ -268,7 +271,7 @@ const validateRecordedCatches = () => {
 
 The recorded catches list displays errors with index-specific identifiers:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=580
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=562
 catches.map((catchItem, index) => {
   const catchErrors = recordedCatchErrors[index] || {};
 

From 647e849d5ab75a0e624fedd4ad4316c239e65805 Mon Sep 17 00:00:00 2001
From: Jay Giang <jayhgiang@gmail.com>
Date: Tue, 10 Jun 2025 16:58:52 -0700
Subject: [PATCH 4/4] Add missing model and component steps

---
 docs/learn/lesson-5.mdx | 120 ++++++++++++++++++++++++++++------------
 1 file changed, 84 insertions(+), 36 deletions(-)

diff --git a/docs/learn/lesson-5.mdx b/docs/learn/lesson-5.mdx
index 7cad0f9..57a7d69 100644
--- a/docs/learn/lesson-5.mdx
+++ b/docs/learn/lesson-5.mdx
@@ -322,50 +322,94 @@ catches.map((catchItem, index) => {
 
 Now it's your turn! Apply the validation patterns you've learned to the End Trip form. This form needs validation for the trip's end time and weather conditions before allowing users to review their complete trip data.
 
-### 4.1: Your Task
+However, before we can add validation, we need to complete the End Trip form implementation since it's currently missing the required fields and components.
 
-Open `src/pages/EndTrip.jsx` and apply the same validation patterns you learned from the Start Trip and Catch Log forms.
+### 4.1: Update the Data Model
 
-**What you need to do:**
+First, you need to enable the `endTime` and `endWeather` fields in the data model.
 
-1. **Set validation errors** in the `handleSubmit` function
-2. **Add error display** for the end time field
-3. **Add error display** for the end weather field
+Your task is to add the `endTime` and `endWeather` fields to the trip model.
 
-### 4.2: Hints for Implementation
+:::info Hint
+Models are defined in `src/index.jsx`.
+:::
 
-**For setting validation errors:**
-```jsx
-// Hint: Use the same pattern as Start Trip
-const newErrors = validateForm();
-// Add your code here to update the errors state
-```
+### 4.2: Import Required Components
 
-**For displaying error messages:**
-```jsx
-// Hint: Follow the same pattern as previous forms
-// Remember to:
-// - Add error prop to FormGroup
-// - Add error prop to Label  
-// - Add validationStatus to the input component
-// - Add conditional ErrorMessage component
-```
+Open `src/pages/EndTrip.jsx` and add the missing component imports.
+
+**Your task:** Add the necessary imports at the top of the file.
+
+**Components you'll need:**
+:::info Hint  
+Look at `src/pages/StartTrip.jsx` to see what components are needed for:
+
+- Time input field
+- Weather dropdown
+- Error message display
+  :::
+
+### 4.3: Add Form Fields to the Component
+
+The End Trip form currently only has navigation buttons. You need to add the actual form fields.
+
+**Fields to add:**
+
+1. **End Time field** - similar to the startTime field in Start Trip
+2. **End Weather field** - similar to the weather field in Start Trip
+
+:::info Hint
+You'll need:
+
+- FormGroup with proper error state
+- Label with required marker and error state
+- Input component with validation status
+- Conditional ErrorMessage component
+  :::
 
-### 4.3: Check Your Work
+### 4.4: Add Form State Management
 
-After implementing validation:
+You'll need to add state management for the form data and handle changes.
 
-1. Navigate to `/end` (after completing previous steps)
-2. Click "Next" without filling any fields
-3. You should see error messages for both End Time and End Weather
-4. Fill in the fields - errors should disappear
-5. Form should proceed to Review page when valid
+:::info Hint
+You'll need to add the following:
 
-**Expected Behavior:**
-- ✅ Error messages appear only after clicking "Next" 
-- ✅ Error styling applied to FormGroup, Label, and input components
-- ✅ Screen readers can access error messages via `aria-describedby`
-- ✅ Navigation blocked until all fields are valid
+- formData state for storing field values
+- handleTimeChange function for time picker
+- handleSelectChange function for dropdowns
+- Form initialization from database/localStorage
+  :::
+
+### 4.5: Implement Validation Logic
+
+Finally, add the validation patterns you learned from the previous forms.
+
+**For validation functions:**
+
+:::info Hint
+- Copy the validateRequired helper from `src/pages/StartTrip.jsx`
+- Add validateForm function that checks both endTime and endWeather
+- Use the same field constants pattern (FIELD_END_TIME, FIELD_END_WEATHER)
+:::
+
+**For setting validation errors:**
+
+:::info Hint
+- Use the same pattern as Start Trip
+- const newErrors = validateForm();
+:::
+
+**For displaying error messages:**
+
+:::info Hint
+- Follow the same pattern as previous forms
+- Remember to:
+  - Add error prop to FormGroup
+  - Add error prop to Label
+  - Add validationStatus to the input component
+  - Add conditional ErrorMessage component
+  - Use proper aria-describedby for accessibility
+:::
 
 ## Step 5: Testing Complete Validation Flow
 
@@ -374,10 +418,12 @@ Test the validation system with both invalid and valid data to ensure it works c
 ### 5.1: Complete Validation Test
 
 1. **Start Trip (`/start`)**:
+
    - Try submitting empty form → verify error messages appear
    - Fill fields correctly → proceeds to Catch Log
 
 2. **Catch Log (`/catch`)**:
+
    - Try "Add Catch" with empty fields → verify validation errors
    - Test invalid coordinates (latitude > 90) → verify range validation
    - Add valid catches → try "Next" with invalid recorded catches → verify list validation
@@ -388,16 +434,18 @@ Test the validation system with both invalid and valid data to ensure it works c
    - Fill fields correctly → proceeds to Review page
 
 **Expected Results:**
+
 - ✅ Errors appear only after submission attempts
-- ✅ Invalid data blocks navigation between steps  
+- ✅ Invalid data blocks navigation between steps
 - ✅ Error styling applied consistently across all forms
 - ✅ Valid data clears errors and allows progression
 
 ## Conclusion
 
-You have successfully implemented comprehensive form validation across all three steps of the trip logging process! 
+You have successfully implemented comprehensive form validation across all three steps of the trip logging process!
 
 **Key Benefits:**
+
 - **Data quality**: Ensures complete, accurate trip information
 - **User experience**: Clear guidance when data doesn't meet requirements
 - **Accessibility**: Screen reader compatible with proper labeling