Skip to content

fix(#463): add validation for empty doubt submissions #679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
knoxiboy merged 2 commits into from
Jun 20, 2026
+10 −3
Merged

fix(#463): add validation for empty doubt submissions #679

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae78bcc
fix(#463): add validation for empty doubt submissions
dreynox Jun 20, 2026
21f02a0
fix(#463): add noValidate to form to bypass native blocking validation
dreynox Jun 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions src/components/AskDoubt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,14 @@ export default function AskDoubt({ defaultSubject = "", isOpen, onClose, onSucce
toast.error(`Question too short — minimum ${minLength} characters required`);
return;
}
if ((!content.trim() && !imageUrl) || !subject.trim()) return;
if (!subject.trim()) {
toast.error("Please enter a subject before submitting.");
return;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
Comment on lines +318 to +321

@codeant-ai codeant-ai Bot Jun 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Fix in Cursor Fix in VSCode Claude

(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
👍 | 👎

if (!content.trim() && !imageUrl) {
toast.error("Please enter your doubt before submitting.");
return;
}

setIsSubmitting(true);
try {
Expand Down Expand Up @@ -404,7 +411,7 @@ export default function AskDoubt({ defaultSubject = "", isOpen, onClose, onSucce
</button>
</div>

<form onSubmit={handleSubmit} className="p-5 sm:p-8 space-y-4 sm:space-y-6 max-h-[80vh] overflow-y-auto">
<form noValidate onSubmit={handleSubmit} className="p-5 sm:p-8 space-y-4 sm:space-y-6 max-h-[80vh] overflow-y-auto">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-[0.25em] text-slate-500 dark:text-slate-500 px-1">Subject / Topic</label>
<input
Expand Down Expand Up @@ -753,7 +760,7 @@ export default function AskDoubt({ defaultSubject = "", isOpen, onClose, onSucce
</button>
<button
type="submit"
disabled={isSubmitting || (!content.trim() && !imageUrl) || !subject.trim() || isTooLong || (hasContent && isTooShort)}
disabled={isSubmitting}
className="flex-[2] py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-bold transition-all shadow-lg shadow-blue-600/20 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
aria-label="Submit">
{isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
Expand Down
Loading