This is a description of a real-world puzzle that was presented to me. In the solution we have the presentation of two fields. One for entry of the userid and one for entry of the password. In addition to these fields, there is a login button. When a user enters their userid and password and the clicks the button, they are logged in. While this worked perfectly out of the box, we weren't satisfied with the result. The login button was permanently enabled. When the button was clicked, we checked that both a userid and password were entered. If either or both were not supplied, we popped up a dialog and returned the user to entering their data. This was less than stellar. What we wanted to have happen was that the login button should be disabled until both the userid and password fields had some values within them. Only at that time did we actually switch on the button to allow the user to click it.
The following video illustrates how we achieved that task.
The core of the story is to initially set the button to be disabled. Next, we add event handler onto the input fields such that the handler is called whenever a key stroke is made by the user. The event handler asks the simple question:
Is the size of data entered in this field greater than zero and is the size of data already entered in the other field greater than zero?
If the answer is yes, we enable the login button. If no, then we disable the login button (which may already be disabled). This expression is only true when there is valid data in both fields. If a characters are deleted from a field, the deletion also causes the event handler to file and the expression re-re-evaluated. If we reach zero characters in the field, then the expression becomes false.