AOSSIE-Org / AOSSIE-Org/EduAid
[FEATURE]: Add Comprehensive Client-Side Form Validation Across All Input Pages in eduaid_web
- Vorherrschende Sprache
- JavaScript
- Sterne
- 171
- Forks
- 425
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
### Feature and its Use Cases
## What is the feature?
The `eduaid_web` app currently has **no client-side form validation** on any of its input pages. Users can submit empty forms, invalid URLs, zero questions, and unsupported file types — all of which either silently fail or send useless requests to the backend.
> **Note:** Issue #466 covers validation improvements specifically for `Text_Input.jsx` and file upload UI. This issue addresses **app-wide validation across all input pages and forms** in `eduaid_web`, not just a single page.
## Current Problems (with specific code references in `Text_Input.jsx` as an example):
### 1. Empty Input Submission
In `handleSaveToLocalStorage()`, if both `docUrl` and `text` are empty, clicking "Next" sets `loading: true` and then **nothing happens** — no error message, no feedback. The user is left confused.
### 2. No URL Format Validation
The Google Doc URL input (`docUrl`) accepts any string. A user can type `"hello123"` and it gets sent directly to `/get_content` — resulting in a failed API call with no user-facing error.
### 3. Question Count Can Be Zero
`decrementQuestions()` allows `numQuestions` to reach **0**. Submitting with 0 questions sends a useless request to the backend: `{ max_questions: 0 }`.
### 4. No File Type/Size Validation
`handleFileUpload()` accepts **any file type**. The UI says "PDF, MP3 supported" but there's no actual check before uploading. Users can upload .exe, .zip, or any unsupported file — the backend will reject it but the user gets no clear feedback.
### 5. Silent Error Handling
All `catch` blocks only do `console.error()`. The user **sees nothing** when:
- File upload fails
- Google Doc URL retrieval fails
- Question generation fails
The only visible feedback is `setText("Error uploading file")` for file upload — but even that replaces the user's input text.
### 6. No Character Count or Input Length Guidance
The textarea has no character counter. Users don't know if their text is too short (e.g., 10 characters) or too long for meaningful question generation.
## How would users benefit?
- **Immediate feedback** when they enter invalid data instead of silent failures
- **Prevented wasted API calls** (empty text, invalid URLs, 0 questions)
- **Clear guidance** on what's expected (min text length, valid URL format, supported file types)
- **Better error messages** instead of console-only logging
## What scenarios would this address?
1. Student pastes very short text (< 50 chars) → gets warning before submitting
2. User enters malformed Google Doc URL → sees "Please enter a valid Google Doc URL" inline
3. User sets questions to 0 → button is disabled or warning shown
4. User uploads a .zip file → gets "Only PDF and MP3 files are supported" before upload
5. Backend API fails → user sees a clear error message, not a silent failure
6. Both text and URL are empty → "Next" button is disabled or shows "Please enter text or a URL"
## Proposed Solution:
1. Create a `validation.js` utility in `eduaid_web/src/utils/` with reusable validators:
- `validateTextInput(text)` — check empty, min length (50 chars), max length (10,000 chars)
- `validateURL(url)` — check valid Google Doc URL format
- `validateNumQuestions(num)` — check > 0 and ≤ 20
- `validateFileType(file)` — check PDF/MP3 only
- `validateFileSize(file)` — check reasonable size limit
2. Wire validators into all input pages (starting with `Text_Input.jsx`) with:
- Inline error messages below each input field
- Disable "Next" button when validation fails
- Minimum question count of 1 (not 0)
3. Replace `console.error` with user-visible error messages in all catch blocks
4. Add a character counter below the textarea
## Files to be created/modified:
### New Files:
- `eduaid_web/src/components/` ← **new folder** (does not exist yet — establishes a reusable components pattern)
- `eduaid_web/src/components/FormValidation/` ← **new folder** (contains all validation-related components)
- `eduaid_web/src/components/FormValidation/ValidationMessage.jsx` ← **new** (reusable inline error/success message component)
- `eduaid_web/src/components/FormValidation/CharacterCounter.jsx` ← **new** (reusable character count indicator)
- `eduaid_web/src/components/FormValidation/FormValidation.css` ← **new** (styles for error messages, counters, disabled states)
- `eduaid_web/src/utils/` ← **new folder** (does not exist yet — establishes a utilities pattern)
- `eduaid_web/src/utils/validation.js` ← **new** (reusable validation functions: validateTextInput, validateURL, validateNumQuestions, validateFileType, validateFileSize)
### Modified Files:
- `eduaid_web/src/pages/Text_Input.jsx` ← **primary file** (wire validators to all inputs, show inline errors, disable "Next" when invalid, replace console.error with user-visible messages)
- `eduaid_web/src/index.css` ← **minor** (global error/validation styles if needed)
- Any other input pages in `eduaid_web/src/pages/` ← **apply same validation pattern**
### Additional Context
### Related but different from existing issues:
- **Issue #466** focuses on enhancing `Text_Input` with interactive file upload UI and error boundaries for that specific component
- **This issue** is about **form validation logic across all input pages** — a different concern (preventing bad data from being submitted vs. catching runtime errors)
### Specific line references in current code (`Text_Input.jsx`):
| Line | Problem |
|------|---------|
| `decrementQuestions()` | Allows `numQuestions` to reach 0 — `prev > 0 ? prev - 1 : 0` should be `prev > 1 ? prev - 1 : 1` |
| `handleSaveToLocalStorage()` | No validation before proceeding — no check for empty text + empty URL |
| `handleFileUpload()` | No file type check — `event.target.files[0]` is sent directly without validation |
| `catch` blocks | Only `console.error` — user sees nothing |
| Google Doc URL input | No regex/format validation before calling `/get_content` |
| Textarea | No character count, no min/max length indicator |
I'd like to work on this issue and submit a PR. Happy to discuss the approach further.
### Code of Conduct
- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Bewertung
Dieses Issue wurde noch nicht bewertet.