Email Validation Done#516
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 36 minutes and 59 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughContact page inputs are now controlled and wrapped in a ChangesContact Form Validation & Controlled Inputs
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @jeetvasoya21 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Contact/Contact.tsx (1)
268-449:⚠️ Potential issue | 🟠 Major | ⚡ Quick winWrap form inputs in a semantic
<form>element.The form inputs are currently wrapped in a
<div>instead of a<form>element, and the submit button usesonClickinstead oftype="submit". This creates accessibility and UX issues:
- Keyboard accessibility: Users cannot press Enter in an input field to submit the form, which is standard expected behavior.
- Screen reader support: Assistive technologies rely on semantic
<form>elements to properly announce form context and structure.- Type mismatch:
handleSubmitexpectsFormEventbut receivesMouseEventfrom the button'sonClick.♿ Recommended fix for accessibility
Replace the outer
<div>wrapper with a<form>element and movehandleSubmitto the form'sonSubmit:-<div +<form + onSubmit={handleSubmit} className={`p-4 sm:p-6 rounded-xl sm:rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${ mode === "dark" ? "bg-white/10 border border-white/20" : "bg-white border border-gray-300" }`} > ... <button - onClick={handleSubmit} + type="submit" disabled={isSubmitting} ... >Then close with
</form>instead of</div>at the end of the form container (around line 449).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Contact/Contact.tsx` around lines 268 - 449, The inputs are inside a <div> so pressing Enter and assistive tech can't treat this as a form; replace the outer form container div with a semantic <form> that uses onSubmit={handleSubmit} (leave handleInputChange, formData, errors, isSubmitting as-is) and move the submit behavior off the button: change the Send button to type="submit" and remove its onClick; ensure handleSubmit signature matches a FormEvent handler and still calls event.preventDefault() and sets isSubmitting appropriately.
🧹 Nitpick comments (1)
src/pages/Contact/Contact.tsx (1)
33-34: 💤 Low valueConsider moving emailRegex outside the component.
Defining the regex inside the component causes it to be recreated on every render. Moving it to module scope would be a minor performance optimization.
♻️ Suggested refactor
+// Email validation regex +const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + function Contact() { const [showPopup, setShowPopup] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); ... - // Email validation regex - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Contact/Contact.tsx` around lines 33 - 34, Move the emailRegex constant out of the React component to module scope to avoid recreating it on every render: define the regex at top-level in the Contact.tsx module (e.g., alongside imports) and leave the component (Contact) to reference that top-level emailRegex; update any usages inside the component (e.g., validateEmail or onSubmit handlers) to use the module-scoped emailRegex.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Contact/Contact.tsx`:
- Around line 98-103: When resetting the form after successful submission (where
you call setFormData to clear fullName, email, subject, message), also reset the
errors state so previous validation errors are cleared; locate the errors state
updater (setErrors) and set it to the initial/empty errors object (matching the
shape used elsewhere) at the same point you call setFormData.
---
Outside diff comments:
In `@src/pages/Contact/Contact.tsx`:
- Around line 268-449: The inputs are inside a <div> so pressing Enter and
assistive tech can't treat this as a form; replace the outer form container div
with a semantic <form> that uses onSubmit={handleSubmit} (leave
handleInputChange, formData, errors, isSubmitting as-is) and move the submit
behavior off the button: change the Send button to type="submit" and remove its
onClick; ensure handleSubmit signature matches a FormEvent handler and still
calls event.preventDefault() and sets isSubmitting appropriately.
---
Nitpick comments:
In `@src/pages/Contact/Contact.tsx`:
- Around line 33-34: Move the emailRegex constant out of the React component to
module scope to avoid recreating it on every render: define the regex at
top-level in the Contact.tsx module (e.g., alongside imports) and leave the
component (Contact) to reference that top-level emailRegex; update any usages
inside the component (e.g., validateEmail or onSubmit handlers) to use the
module-scoped emailRegex.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4e78ffde-e81e-4722-9d8b-d2f84201d129
📒 Files selected for processing (1)
src/pages/Contact/Contact.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Contact/Contact.tsx`:
- Around line 269-270: The Contact form's browser-native validation can block
React's handleSubmit and prevent your setErrors/inline rendering from running;
update the form element in Contact.tsx (the component containing handleSubmit)
to include the noValidate attribute on the <form> so the browser won't intercept
submission and your custom validation in handleSubmit will always run. Ensure
the attribute is added to the same form element that currently has
onSubmit={handleSubmit} so no other behavior changes are required.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 25b4ffb1-c842-42eb-a7f2-3e6269393634
📒 Files selected for processing (1)
src/pages/Contact/Contact.tsx
|
Fixed the requested changes. Please review again. |
2 participants
Related Issue
Description
Implemented comprehensive form validation for the Contact page to improve user input handling and provide clear validation feedback.
Changes Added
Added frontend form validation with state management
Implemented email regex validation:
Added real-time error handling that clears validation messages while typing
Added HTML5
type="email"validation supportValidation Features
Email Validation Logic
Files Modified
Contact.tsx— Added form validation, error handling, and user feedback improvementsHow Has This Been Tested?
Invalid Email Test
demo"Please enter a valid email address"Valid Email Test
john.doe@example.com"Thank you for contacting us! We will get back to you shortly."Screenshots (if applicable)
Added screenshots for:
Type of Change
Summary by CodeRabbit