Skip to content

Fix required input validation to match design and avoid error dialog #31905

@nicobytes

Description

@nicobytes

Problem Statement

When a required input field is left empty, the system shows a generic “Bad request error” dialog instead of applying the proper visual validation feedback directly on the field as defined by the design system.

This leads to a poor user experience, as users are not guided inline to correct their input and instead must interpret an error modal.

Current Expected
Image Image

Steps to Reproduce

  1. Leave the required input field empty
  2. Submit the form
  3. Observe that a modal dialog is shown instead of inline validation feedback

Acceptance Criteria

  1. When a required field is empty and the user submits the form, the field shows a red border and an inline error message according to the design system.
  2. No modal or dialog appears when a required field validation fails on the client side.
  3. The error message is specific and clearly indicates that the field is required.
  4. The validation state is immediately visible to the user without needing to interact with another component.
  5. If the user starts typing into the field again, the error state is cleared once the input is valid.
  6. This behavior is consistent across all required fields in the form.

dotCMS Version

latest

Proposed Objective

Core Features

Proposed Priority

Priority 4 - Trivial

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions