Mock 400 Bad Request Validation Error

400 Bad Request — Validation Error

A 400 status code indicates that the server cannot process the request due to client-side input errors. This mock generates a structured validation error response that follows the RFC 7807 "Problem Details" pattern adapted for JSON APIs.

Response Structure

{
  "error": {
    "code": "BAD_REQUEST",
    "message": "The request body is invalid or missing required fields.",
    "details": [
      {
        "field": "email",
        "message": "Must be a valid email address."
      },
      {
        "field": "name",
        "message": "Must be at least 2 characters long."
      }
    ]
  }
}

Design Principles

• Machine-readable code — The code field provides a stable identifier that clients can use in switch statements or error mapping logic.
• Human-readable message — The message field gives a general description suitable for displaying to end users or logging.
• Field-level details — The details array maps each validation error to a specific field, enabling inline form validation feedback.

Frontend Handling

When receiving a 400 response, your frontend should:

1. Parse the details array
2. Map each entry to the corresponding form field
3. Display the error message next to the input
4. Optionally show the top-level message as a toast or banner

Common Variations

Some APIs use errors instead of details, or nest the structure differently. The key principle is consistency: pick one format and use it across all endpoints.