fix: add client-side validation for future birth dates in PetForm

[lindaeskilsson]

Closes #224

DONE

• Lagt till max={today} på date-inputen så webbläsarens kalender spärrar framtida datum
• Lagt till onSubmit-validering som fångar framtida datum och avbryter submit
• Felmeddelande visas under fältet: "Födelsedatum kan inte vara i framtiden."
• Catch-blocket läser backend 400-fel och mappar dateOfBirth → fältfel i UI:t
• Generell felbanner visas vid övriga fel istället för alert()

Ingen backend-ändring

Befintlig @PastOrPresent-validering i PetRequest.java är oförändrad.

Summary by CodeRabbit

Release Notes

• New Features

  • Form validation now provides field-specific error messages for improved clarity
  • Added date-of-birth validation to prevent selecting future dates

• Bug Fixes

  • Enhanced error handling replaces generic alerts with clear, actionable messages
  • Added visual error indicators and error banner for better user guidance

[coderabbitai]

Warning

Rate limit exceeded

@lindaeskilsson has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 24 minutes and 23 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 24 minutes and 23 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1d770afb-6f03-40e6-b2ab-e2096e3b1690

📥 Commits

Reviewing files that changed from the base of the PR and between b6c2b93 and 59a3097.

📒 Files selected for processing (1)

• frontend/src/components/PetForm.jsx

📝 Walkthrough

Walkthrough

PetForm component now validates that date-of-birth values are not in the future through client-side checks and max attribute constraints. Server-side 400 responses are parsed to map backend validation errors to specific form fields, with generic fallback error display. Error states and messages are rendered in the UI with field-level clearing on user input.

Changes

Cohort / File(s)

Summary

PetForm DOB Validation & Error Handling frontend/src/components/PetForm.jsx

Added fieldErrors state for per-field error tracking. Implemented client-side DOB validation on submit with max={today} constraint on date input. Enhanced server error handling to parse HTTP 400 responses and map dateOfBirth/date errors to fieldErrors.dob, other backend fields to corresponding fieldErrors[field], or fieldErrors.general as fallback. Added error message display below DOB input, general error banner above action buttons, and clear-on-edit behavior for DOB errors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A hop, a skip, through dates so fine,
No future births shall ever cross the line!
With max and checks, we catch them all,
Validation strong, both big and small!
The form now speaks in errors clear—
All thanks to logic, never fear! 🐇✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding client-side validation for future birth dates in the PetForm component, which is the primary focus of the changeset.
Linked Issues check	✅ Passed	All acceptance criteria from issue #224 are met: max attribute prevents future dates in calendar, onSubmit validation catches future dates, Swedish error message displays, backend 400 errors map to form fields, and no backend changes required.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #224 requirements: date input validation, error state management, and error message display in PetForm with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/pet-form-future-date-validation

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/PetForm.jsx`:
- Around line 174-178: The error banner in PetForm.jsx rendering
{fieldErrors.general} contains an accidental "..." utility class; remove the
literal "..." and replace it with concrete Tailwind classes (e.g., padding, text
color/size, and spacing) so the banner is fully styled—update the JSX div that
checks fieldErrors.general to use classes like p-3 or px-4 py-3 plus text-sm
text-red-700 bg-red-50 border border-red-200 rounded-lg instead of "...".
- Around line 50-58: The current handler in PetForm.jsx assumes data.errors is
an array and calls data.errors.forEach(...), but the backend sends an object map
(e.g. { dateOfBirth: [...] }), causing a crash and skipping the field-level
fallback; update the logic in the PetForm.jsx error handling to detect whether
data.errors is an Array or an Object (use Array.isArray) and handle both shapes:
if array, keep the existing forEach logic mapping err.field/defaultMessage; if
object, iterate Object.entries(data.errors) and for each key (like
"dateOfBirth") pick the first message in the array or map specific keys to
errors.dob, otherwise set errors[key] to the first message; ensure you update
the same variables (data.errors, errors, errors.dob, dateOfBirth) so downstream
validation/display works.
- Line 15: The current const today uses toISOString() (UTC) which misaligns with
the HTML date input and validation; replace it with a local-date string
constructed from new Date() using getFullYear(), getMonth()+1, and getDate()
with zero-padding so today matches the user's local calendar, then use that same
local today value for the input max and the form validation check (the
comparison involving formData.dob) to ensure both the max attribute and the
client-side "dob > today" logic use the same local-date format.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d5ff9858-267b-4e5c-9390-87acdd7ccd9e

📥 Commits

Reviewing files that changed from the base of the PR and between 1df9bf6 and b6c2b93.

📒 Files selected for processing (1)

• frontend/src/components/PetForm.jsx