Skip to content

Clear Validation Error When User Starts Typing in Input Fields #2775

@nielsbosma

Description

@nielsbosma

Problem

When a validation error is displayed below an input field (e.g., "Please enter a value"), the error persists even after the user starts typing. The error only clears when the user clicks the submit button again, which creates a poor user experience.

Evidence from UX review:

  • Error callout remains visible after entering text in textarea
  • Recommendation: "Clear error state when user starts typing in textarea (OnChange event)"

This affects textarea inputs and likely other input types (text, number, etc.) that use similar validation patterns.

Evidence

User testing screenshots show:

  • 03-empty-input-error.png - Error displayed on empty input
  • 04-transcript-entered.png - Error callout still visible after entering text

Source: Testing session from AIMeetingNotesExtractor app (session: 2b458b9a-e9ec-40d7-9aae-8918deaca21b)

Proposed Solution

Update the Ivy Framework input widgets to automatically clear validation errors when the user modifies the input value. This should apply to:

  1. TextareaInput - Clear error on OnChange event
  2. TextInput - Clear error on OnChange event
  3. NumberInput - Clear error on OnChange event
  4. SelectInput - Clear error on value change

Implementation Approach

  • Add state management to track when validation error has been shown
  • Clear the error state when OnChange fires (before next validation)
  • Ensure this doesn't interfere with real-time validation patterns

Files to Check

  • src/Ivy/Widgets/Inputs/TextareaInput.cs
  • src/Ivy/Widgets/Inputs/TextInput.cs
  • src/Ivy/Widgets/Inputs/NumberInput.cs
  • src/Ivy/Widgets/Inputs/SelectInput.cs

Testing

After implementation:

  1. Test manually with an app that has validation errors
  2. Verify error clears immediately when user starts typing
  3. Ensure validation still works correctly on form submission

Notes

This is a UX improvement identified during user testing workflows: CreateConnection, CreateUsingReferenceConnection, CreateApp, CreateAdHocApp with references to ChatApp, DesignGuidelines, OpenAIConnection.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions