Thrive page date validation error message not visually distinguished on Windows Edge #73

New Issue

swap12875d · 2025-09-22T01:47:11-04:00

swap12875d commented

2025-09-22 01:47:11 -04:00

Description:

On the Thrive page filter section, when invalid date ranges are entered (e.g., a start date later than the end date), the form validation shows the error message "from should be before end" in a simple black font indistinguishable from normal text. Although the input field is highlighted in red, the error message itself is not prominently visible, making it difficult for users to quickly recognize the validation error.

Current URL:

https://www.topcoder.com/thrive/search?author=rng_58&endDate=2025-03-20&startDate=2025-08-09&track=Competitive%20Programming

Steps to reproduce:

Navigate to the Thrive page at the specified URL.
In the filter section form, enter a start date that is later than the end date.
Observe the validation message "from should be before end" displayed below or near the date inputs.
Notice the styling of the message and input field.

Actual results:

The error message "from should be before end" is displayed in simple black font, similar to normal text.
Only the date input field is highlighted in red.
The error text does not stand out visually, making it hard for users to quickly notice the validation error.

Expected results:

The error message should be styled prominently (e.g., red color, bold font) to grab user attention immediately.
Both the input field and the error message should visually indicate a validation issue clearly.
This enhances usability and accessibility by making error messages obvious.

Screenshots/Videos:

OS and Browser version:

Windows 11, Edge 140.0.3485.81

VersionDetails:

Device:

Windows Laptop

Reproducibility:

5/5 (reproducible every time)

#### Description: On the Thrive page filter section, when invalid date ranges are entered (e.g., a start date later than the end date), the form validation shows the error message "from should be before end" in a simple black font indistinguishable from normal text. Although the input field is highlighted in red, the error message itself is not prominently visible, making it difficult for users to quickly recognize the validation error. #### Current URL: https://www.topcoder.com/thrive/search?author=[[rng_58]]&endDate=2025-03-20&startDate=2025-08-09&track=Competitive%20Programming #### Steps to reproduce: 1. Navigate to the Thrive page at the specified URL. 2. In the filter section form, enter a start date that is later than the end date. 3. Observe the validation message "from should be before end" displayed below or near the date inputs. 4. Notice the styling of the message and input field. #### Actual results: - The error message "from should be before end" is displayed in simple black font, similar to normal text. - Only the date input field is highlighted in red. - The error text does not stand out visually, making it hard for users to quickly notice the validation error. #### Expected results: - The error message should be styled prominently (e.g., red color, bold font) to grab user attention immediately. - Both the input field and the error message should visually indicate a validation issue clearly. - This enhances usability and accessibility by making error messages obvious. #### Screenshots/Videos: ![image.png](/attachments/beb2441d-951a-420e-aa8e-c4a9ecaf6f29) #### OS and Browser version: Windows 11, Edge 140.0.3485.81 VersionDetails: <img src='/attachments/8ff74cb7-ba4b-4ef3-b25c-b2b8058aad3e' width='600' height='400' alt='Windows_edge_version_screenshot'> #### Device: Windows Laptop #### Reproducibility: 5/5 (reproducible every time)

image.png

178 KiB

swap12875d added the Edge UI Windows labels 2025-09-22 01:47:11 -04:00

nithya160925 added the Chrome S: Low valid labels 2025-09-24 06:07:11 -04:00

nithya160925 added the P: Thrive label 2025-09-25 05:03:08 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Topcoder-Platform/public-website-qa-bug-hunt#73