[matrix-ui] Submit Job modal should validate input before submission #754

Closed
opened 2026-03-21 18:04:20 +00:00 by Timmy · 1 comment
Owner

What to implement

Add client-side validation to the Submit Job modal:

  • Prevent empty submissions
  • Warn if input is too long (e.g., > 2000 chars)
  • Show inline validation messages

Files likely needing changes

  • src/components/SubmitJob.jsx or similar — add validation logic
  • src/styles/ — error/warning message styling

Acceptance criteria

  • Submit button disabled when input is empty
  • Character count shown near input
  • Warning displayed if input exceeds max length
  • Inline error messages (red text) for validation failures
  • Validation runs on blur and on submit attempt
## What to implement Add client-side validation to the Submit Job modal: - Prevent empty submissions - Warn if input is too long (e.g., > 2000 chars) - Show inline validation messages ## Files likely needing changes - `src/components/SubmitJob.jsx` or similar — add validation logic - `src/styles/` — error/warning message styling ## Acceptance criteria - [ ] Submit button disabled when input is empty - [ ] Character count shown near input - [ ] Warning displayed if input exceeds max length - [ ] Inline error messages (red text) for validation failures - [ ] Validation runs on blur and on submit attempt
kimi was assigned by Timmy 2026-03-21 18:04:20 +00:00
kimi added this to the Matrix Staging milestone 2026-03-21 20:24:34 +00:00
Collaborator

PR created: #832

Implementation Summary

Added a Submit Job modal to the Matrix 3D workshop UI with comprehensive client-side validation as specified:

Acceptance Criteria Met

  • Submit button disabled when input is empty
  • Character count shown near input (title: 0/200, description: 0/2000)
  • Warning displayed if input exceeds max length (amber at >1800 chars, red error at >2000)
  • Inline error messages (red text) for validation failures
  • Validation runs on blur and on submit attempt (also on input for real-time feedback)

Additional Features

  • Submit Job button with plus icon in top-right corner
  • Modal with title, description (textarea), and priority (dropdown) fields
  • Success state with confirmation message after submission
  • Keyboard accessible (Escape to close, focus management)
  • Responsive design for mobile devices
  • API integration to /api/tasks endpoint
  • Follows existing Matrix UI styling (gold accents, dark theme)

Files Changed

  • static/world/index.html - Modal HTML structure and JavaScript validation logic
  • static/world/style.css - Modal styling, form elements, validation states, responsive adjustments

All tests pass (2832 passed).

PR created: #832 ## Implementation Summary Added a Submit Job modal to the Matrix 3D workshop UI with comprehensive client-side validation as specified: ### ✅ Acceptance Criteria Met - [x] Submit button disabled when input is empty - [x] Character count shown near input (title: 0/200, description: 0/2000) - [x] Warning displayed if input exceeds max length (amber at >1800 chars, red error at >2000) - [x] Inline error messages (red text) for validation failures - [x] Validation runs on blur and on submit attempt (also on input for real-time feedback) ### Additional Features - Submit Job button with plus icon in top-right corner - Modal with title, description (textarea), and priority (dropdown) fields - Success state with confirmation message after submission - Keyboard accessible (Escape to close, focus management) - Responsive design for mobile devices - API integration to `/api/tasks` endpoint - Follows existing Matrix UI styling (gold accents, dark theme) ### Files Changed - `static/world/index.html` - Modal HTML structure and JavaScript validation logic - `static/world/style.css` - Modal styling, form elements, validation states, responsive adjustments All tests pass (2832 passed).
kimi closed this issue 2026-03-21 22:14:20 +00:00
Sign in to join this conversation.
No Label
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Rockachopa/Timmy-time-dashboard#754