Error Message Not Shown After Failed Submit

When a form submission fails — because of a validation error or a server-side rejection — the application does not display an error message. The form appears unchanged or shows a neutral state, leaving the user with no information about what went wrong or how to fix it.

MediumBeginnerManual testingExploratory testingAPI testing

// UNDERSTAND

// Symptoms

The form is submitted with invalid data and no error message appears anywhere on the page
The submit button briefly shows a loading state and then returns to its default label with no feedback
The API returns a non-2xx status code for an invalid submission, but the UI shows no visible response
The error message element exists in the HTML source but remains hidden after a failed submit
Submitting a required field as empty has no visible effect other than the request being visible in DevTools

// Root Cause

The frontend error-handling branch updates the error-message component's text content but does not set the visibility flag that controls the element's conditional render — the message is stored in state but never rendered
The error element is unconditionally styled with display: none or visibility: hidden, so even after the error state is updated the element remains invisible
The fetch wrapper or Axios interceptor catches non-2xx responses and resolves the promise as if it were a success, so the error-handling branch in the submit handler is never reached

// Where It Appears

Contact and support request forms where required fields are validated server-side
Registration forms where duplicate email or username is rejected after submission
Login forms where invalid credentials return a 401 that the frontend silently swallows
Profile and settings update forms where server-side business-rule validation fails

// REPRODUCE & TEST

// How to Reproduce

01Navigate to the contact form at /contact
02Leave the email field empty (required field)
03Fill in the message field with any text
04Click the Send Message button
05Observe whether any error message appears on the page after the submission attempt
06Open DevTools > Network tab and confirm the POST /api/contact-messages request returned a non-2xx status (e.g. 422 Unprocessable Entity)

// Test Data Needed

Access to the contact form at /contact
Browser DevTools to inspect HTTP responses and DOM state

// Manual Testing Ideas

Submit each required field empty, one at a time, and confirm an error message appears for each
Submit with an invalid email format (e.g. not-an-email) and confirm the error message names the invalid field
Open DevTools and confirm the API returned a non-2xx status; then compare that with what the UI shows
Inspect the DOM after a failed submit — is the error element present and hidden, or absent entirely?
Test in Firefox and Safari in addition to Chrome to rule out browser-specific rendering differences
Check keyboard-only navigation: submit the form with Tab and Enter without a mouse and confirm an error appears for screen-reader users

// API Testing Ideas

Send POST /api/contact-messages with the email field omitted
Assert the HTTP status is 422 Unprocessable Entity (not 200)
Assert the response body contains a message field describing the validation failure
Confirm the API correctly rejects the invalid submission — this isolates the bug to the frontend display layer

// Automation Idea

Write a Playwright test that submits the contact form at /contact with the email field empty. After clicking the Send Message button, assert that an element with a role of 'alert' or a class containing 'error' is visible on the page. Also assert the element's text content is not empty. Separately, send the same invalid payload directly to POST /api/contact-messages and assert HTTP 422, confirming the API-side validation is correct and the bug is isolated to the frontend error display.

// Expected Result

After a failed form submission, a descriptive error message appears on the page identifying which field failed and why.

// Actual Result (Example)

After submitting the contact form at /contact with the email field empty, no error message appears. DevTools confirms the API returned 422 Unprocessable Entity with body { "error": "email is required" }, but the UI shows no change.

// REPORT IT

Example Bug Report

Title: No error message shown after submitting /contact form with empty email field
Severity: Medium
Environment: Staging environment Chrome 124 Contact form at /contact Not logged in
Steps to Reproduce: 01Navigate to /contact
02Leave the email field empty
03Enter any text in the message field
04Click the Send Message button
05Observe the page after the submission attempt
06Open DevTools > Network tab and inspect the POST /api/contact-messages response
Expected Result: An error message appears identifying the email field as required.
Actual Result: No error message appears. The form returns to its default state. DevTools shows POST /api/contact-messages returned 422 with body { "error": "email is required" }.
Impact: Users who submit the form incorrectly receive no feedback and cannot tell whether their message was sent or what they need to fix — most will abandon the form or submit repeatedly without understanding the failure.