← Back to Demo Hub
Test #18Forms & User Input

Form Submit Without Validation

Submitting form data without client-side validation, causing API errors.

📋 Demo Instructions

  1. Click the "Trigger Error" button below
  2. Open browser console (F12) to see the error
  3. Wait 5-10 seconds for the error to be captured
  4. Go to Dashboard → Performance Monitoring
  5. Click "Fix with Carla" on the error
  6. Review the generated PR
🌍 Real-World Scenario
Form submits empty or invalid data to the API, resulting in validation errors from the backend. This causes poor UX as users must wait for network round-trip to see errors, and wastes API resources validating obviously invalid data.
✅ Expected Fix
Add client-side validation before form submission. Check required fields, email format, password strength, etc. Show immediate feedback to users.
Fix Confidence:MEDIUM

💻 Buggy Code

// Buggy Code
const handleSubmit = async (e) => {
  e.preventDefault();

  // No validation!
  const response = await fetch('/api/register', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });

  // API returns 400 Bad Request with validation errors
}
// Poor UX: errors shown after API call instead of immediately

🔴 Error Log

Waiting for error to be triggered...

Try submitting with empty fields or invalid data - no client-side validation!