fix(#463): add validation for empty doubt submissions#679
Conversation
|
@dreynox is attempting to deploy a commit to the Karan Mani Tripathi 's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
github-actions
Bot
added
gssoc'26
|
Warning Review limit reached
More reviews will be available in 41 minutes and 59 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughIn ChangesAskDoubt Form Validation
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 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 |
|
@coderabbitai review |
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| if (!subject.trim()) { | ||
| toast.error("Please enter a subject before submitting."); | ||
| return; | ||
| } |
There was a problem hiding this comment.
Suggestion: This custom empty-subject validation will not reliably run because the subject input still uses native HTML required, which blocks form submission before handleSubmit executes. As a result, users won't consistently see the new toast message and will get browser-native validation instead. Remove native blocking validation for that field (or disable native form validation) so this check actually controls the UX. [incomplete implementation]
Severity Level: Major ⚠️
- ⚠️ Subject-empty validation uses browser message instead of toast.
- ⚠️ Ask Doubt modal UX inconsistent with new validation behavior.Steps of Reproduction ✅
1. Run the app (e.g., `npm run dev`) and open the public rooms page where the ask modal is
wired, implemented at `src/app/public-rooms/page.tsx:20-31`, then click the "Be the first
to ask" button (`page.tsx:7-13`) to set `isAskModalOpen` to true and render `<AskDoubt ...
/>` (`page.tsx:20-29`).
2. In the rendered `AskDoubt` modal (`src/components/AskDoubt.tsx:391-773`), focus the
"Subject / Topic" input defined at `AskDoubt.tsx:416-427` which includes the `required`
attribute on the `<input type="text" ... required />`.
3. Delete all text from the subject field so it is completely empty, then type a
sufficiently long question (≥ 20 characters) into the textarea at `AskDoubt.tsx:474-488`
so that `hasContent` is true and `isTooShort` is false, and leave attachments empty so
only the subject is invalid.
4. Click the "Post Doubt" submit button defined at `AskDoubt.tsx:761-767`; because the
subject input is marked `required` (`AskDoubt.tsx:426`), the browser's native HTML5
validation prevents the form submission and blocks the React `onSubmit={handleSubmit}`
handler at `AskDoubt.tsx:307-389` from running, so the custom toast-based check `if
(!subject.trim()) { toast.error("Please enter a subject before submitting."); return; }`
at `AskDoubt.tsx:318-321` never executes and users see only the browser's default "Please
fill out this field" tooltip instead of the intended toast error.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** src/components/AskDoubt.tsx
**Line:** 318:321
**Comment:**
*Incomplete Implementation: This custom empty-subject validation will not reliably run because the subject input still uses native HTML `required`, which blocks form submission before `handleSubmit` executes. As a result, users won't consistently see the new toast message and will get browser-native validation instead. Remove native blocking validation for that field (or disable native form validation) so this check actually controls the UX.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix![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
🧹 Nitpick comments (1)
src/components/AskDoubt.tsx (1)
319-324: ⚡ Quick winMove new toast copy to constants instead of inline literals.
At Line 319 and Line 323, the new user-facing messages are hardcoded. Please extract them into shared constants (e.g.,
@/lib/copy-constants) for consistency and easier localization/copy updates.As per coding guidelines, "
**/*.tsx: ... No hardcoded strings (use constants)."🤖 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/components/AskDoubt.tsx` around lines 319 - 324, The hardcoded string literals used in the toast.error calls at lines 319 and 323 within the AskDoubt component violate the coding guidelines that require using constants instead of inline strings. Extract both toast error messages ("Please enter a subject before submitting." and "Please enter your doubt before submitting.") into a shared constants file such as `@/lib/copy-constants` with descriptive constant names. Then import these constants into AskDoubt.tsx and replace the hardcoded strings in the toast.error() calls with references to the newly created constants.Source: Coding guidelines
🤖 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/components/AskDoubt.tsx`:
- Around line 318-320: The custom subject validation toast at line 319 in the
handleSubmit function is unreachable because the form's native required
attribute on the subject input field (line 426) prevents form submission before
handleSubmit executes. Add the noValidate attribute to the form element that
wraps both the subject input and submit button to disable native browser
validation and allow your custom validation logic in handleSubmit to run,
ensuring the toast message displays consistently when subject is empty.
---
Nitpick comments:
In `@src/components/AskDoubt.tsx`:
- Around line 319-324: The hardcoded string literals used in the toast.error
calls at lines 319 and 323 within the AskDoubt component violate the coding
guidelines that require using constants instead of inline strings. Extract both
toast error messages ("Please enter a subject before submitting." and "Please
enter your doubt before submitting.") into a shared constants file such as
`@/lib/copy-constants` with descriptive constant names. Then import these
constants into AskDoubt.tsx and replace the hardcoded strings in the
toast.error() calls with references to the newly created constants.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e4b1eee4-0389-46dc-b537-b74e513eac5b
📒 Files selected for processing (1)
src/components/AskDoubt.tsx
|
Hi @knoxiboy , please review this PR and let me know if any changes are required. Thank You. |
knoxiboy
added
level:beginner
github-actions
Bot
added
gssoc:approved
2 participants
User description
UI Enhancement: Add validation message when submitting empty doubt/question input #463
Related Issue
Closes #463
Type of Change
Description
This PR resolves an issue where users could attempt to submit a doubt/question without entering any content and not receive any clear validation feedback. Previously, the submit button was disabled when the input was invalid, but since it provided no actionable feedback, users were left confused thinking the submission process was broken.
The fix updates the form logic by making the submit button clickable even when fields are empty and moving the strict validation checks inside the
handleSubmitfunction. It now usessonnertoast notifications to provide clear error messages ("Please enter a subject before submitting." and "Please enter your doubt before submitting.") to explicitly inform the user why the form cannot be submitted, greatly improving overall UX and accessibility.Changes Made
src/components/AskDoubt.tsxhandleSubmitto show a toast error if the subject field is empty.handleSubmitto show a toast error if both the doubt text and image attachments are missing.disabledproperty, ensuring users can click the button and trigger the new validation feedback instead of the button being silently unclickable.Screenshots / Recordings
(If applicable, you can attach screenshots or a screen recording here showing the new red toast validation error appearing when clicking submit on an empty form.)
How to Verify Locally
"Please enter a subject before submitting.""Please enter your doubt before submitting."and the form will be prevented from sending the API request.Checklist
tsc --noEmit)GSSoC'26 Contributor Declaration
CodeAnt-AI Description
Add clear error messages when users try to submit a doubt without required input
What Changed
Impact
✅ Clearer doubt submission errors✅ Fewer failed posts with no feedback✅ Less confusion when required fields are empty💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit