Event Handler CS Thinking Example 3

Follow the full solution, then compare it with the other examples linked below.

Example 3

medium
A form has a text input and a submit button. Write pseudocode for event handlers that: (1) validate the input is not empty when submit is clicked, and (2) clear any error message when the user starts typing.

Solution

  1. 1
    Step 1: WHEN submitButton.clicked: IF textInput.value == '' THEN show error 'Field required'. ELSE submit the form.
  2. 2
    Step 2: WHEN textInput.changed: hide error message. This gives immediate feedback — the error disappears as soon as the user starts fixing it.

Answer

Submit handler validates input; text change handler clears errors. Two handlers cooperate for a responsive user experience.
Multiple event handlers on different elements can work together to create smooth user interactions. Clearing errors on input change is a common UX pattern.

About Event Handler

A function that is automatically called when a specific event occurs, such as a button click, key press, or timer tick. The handler is registered (attached) to an event source once, and then the system invokes it every time that event fires.

Learn more about Event Handler →

More Event Handler Examples

Example 1 easy

In a web page, a button has this event handler: WHEN button.clicked: OUTPUT 'Button was clicked!'. E

Example 2 medium

Write pseudocode for a simple calculator with buttons for digits 0-9 and an '=' button. How would yo

Example 4 hard

Explain the problem of attaching an event handler inside a loop: FOR i = 0 TO 4: WHEN buttons[i].cli

← All Event Handler Examples Event Handler Concept