Method and apparatus for validating user input fields in a graphical display

For validating user input fields in a graphical user interface, a data entry field includes a graphical validation indicator. In response to user activation of the validation indicator, such as by hovering with an on-screen pointer, a message is displayed in visual association with the data entry field. The message describes one or more expected characteristics of the data to be entered, for example that the data is numerical. As the user enters data consistent with the expected characteristics, the validation indicator is displayed with a neutral appearance, indicating that no errors have been detected. If incorrect data is detected, the validation indicator takes on an emphasized appearance, such as a higher intensity and/or an error-indicating color such as red, providing an immediate error indication to the user. An error message may also be displayed in visual association with the data entry field. The error message is preferably displayed with an emphasized appearance, and may specifically identify the error in the entered data.

BACKGROUND OF THE INVENTION

The present invention is related to the field of validating user input in a graphical user interface of a computerized system.

A common function of a graphical user interface is to provide a mechanism for a user of a computerized system, such as personal computer or workstation, to enter data that is to be provided to an application program. The application program may be executing on the computerized system itself, or it may be executing on another computer that is communicatively coupled to the computerized system. This latter configuration is common, for example, in distributed “client-server” applications of the type commonly deployed in the Internet-based World Wide Web. In Web applications, the user interface is in the form of a Web page that is displayed on a user's personal computer by a browser application. The Web page contains various fields for data entry along with user-activatable objects such as buttons and scroll bars, for example.

Many applications, including Web-based client server applications, provide some degree of checking or validation of user-entered data. Such validation might take the form, for example, of determining whether entered data is of the correct type or amount. In current systems, it is common for validation to be performed only after all the data for a particular page has been entered and the user has activated a “complete” or “submit” button. The page is transferred from the client to the server, where the application program performs the validation of the input data on the page. If one or more errors are found, the page is re-posted on the user's display with an error message. The error message commonly appears near the top of the re-posted page so as to be readily noticed by the user.

SUMMARY OF THE INVENTION

In the existing form-based techniques for validating user input, there is generally no visual connection between a displayed error message and the field(s) in which the error(s) have been detected. Upon receiving the re-posted form with the error message, the user is forced to go back through the form to find the field(s) of interest, modify the entered data, and then re-submit the form. The process may have to be repeated if a mistake is repeated or a new mistake is made during the process of correcting an initial mistake. This process of error detection and correction is slow and cumbersome.

In accordance with the present invention, a method and apparatus for validating user input fields in a graphical display of a computerized system is disclosed. A data entry field displayed on the graphical display includes a graphical validation indicator indicating that data entered in the data entry field is subject to validation. In one embodiment, the validation indicator is an encircled script letter “i” on a contrasting background, and it is located at the far right of the data entry field. In response to user activation of the validation indicator, such as by hovering with an on-screen pointer, a message is displayed in visual association with the data entry field. The message describes one or more expected characteristics of data to be received by the computerized system via the data entry field. For example, the message might indicate that a number rather than non-numerical text is expected. The message can be displayed, for example, in a semi-transparent manner immediately adjacent to the data entry field.

As the user enters data into the data entry field, it is determined dynamically whether the entered data is consistent with the expected characteristics. If so, the validation indicator is displayed with a neutral appearance, indicating to the user that there are no errors and that the user should continue entering data. However, if data is entered that is inconsistent with the expected characteristics, the validation indicator changes to have an emphasized appearance, for example by displaying it with higher intensity and/or in an error-indicating color, such as red. This indicates to the user that there is an error in the data being entered, and thus provides the user with an immediate opportunity to correct the error before proceeding to other data entry fields. The user is not required to submit the entire form before being notified of the error, nor to search for a field of interest after being presented with an error message that is visually dissociated from the field.

In conjunction with displaying the validation indicator with the emphasized appearance, a second message may also be dynamically displayed in visual association with the data entry field. The second message describes one or more of the expected characteristics that the user-entered data is inconsistent with, and may specifically identify the error that the user has made. For example, if a number is expected and the user enters a letter, the second message might inform the user that the entered letter is not a number. In one embodiment, the second message is displayed when the user activates the validation indicator, such as by hovering. The second message is preferably displayed with an emphasized appearance. In one embodiment, the second message is displayed in a message box whose border is of the same error-indicating color as the validation indicator. The validation indicator can also be moved from the data entry field to the message box, to help the user understand the purpose of the message.

Other features and advantages of the present invention are described in the Detailed Description below.

DETAILED DESCRIPTION

FIG. 1shows a distributed, client-server environment typical of the World Wide Web, for example. Client and server computer systems10and12respectively are connected to a network such as the Internet14. The client10is a computerized system such as a personal computer or workstation capable of running a Web browser or similar graphical user interface and a field validation application of the type described herein. The server12has access to storage device(s)16which store Web pages for serving to clients such as the client10. Shown inFIG. 1is a Web page18which is associated with a field validation “applet” or application program19that is downloaded and executed by the client10in conjunction with the displaying of the Web page18at the client10. As is commonly known in the art, the Web page18is a software object written in a markup language such as Hyptertext Markup Language (HTML) or Extensible Markup Language (XML), and the field validation applet19may be written in a programming language such as the Java® programming language developed by Sun Microsystems, Inc. On the request of the browser at the client10, the server12retrieves the Web page18from storage16and transmits it to the client10via the Internet14. Upon receiving the Web page18, the client10renders the graphical content on a local graphical display device. The client10also obtains and executes the field validation applet19, which interacts with a user via the displayed graphical content in a manner set forth in detail below.

FIG. 2illustrates an example arrangement of the client10configured according to embodiments of the invention. The client10includes an interconnection mechanism20that couples a memory system22, a processor24, an input/output interface26and a communications interface28. The input/output interface26allows peripheral devices to be connected to the client10. In this example, coupled to the input/output interface26and operating as part of the client10, are a peripheral input device30such as a mouse and/or a keyboard and a peripheral output device such as a computer display32upon which the client10can render or otherwise display visual images such as a graphical user interface as described herein. The communications interface28allows the client10to communicate with devices (i.e., resources) that operate within the Internet14.

The memory system22is encoded with a field validation application19-1. The field validation application19-1represents software code such as data and/or logic instructions (e.g., stored in the memory22or on another computer readable medium such as a disk) that embody the processing functionality of embodiments of the invention. The processor24can access the memory system22via the interconnection mechanism20in order to launch, run, execute, interpret or otherwise perform the logic instructions of the field validation application19-1in order to produce a field validation process19-2. In other words, the field validation process19-2represents one or more portions of the field validation application19-1(or the entire application19-1) executing within or upon the processor24in the client10. It is to be understood that the field validation applet19embedded in the Web page18ofFIG. 1is represented inFIG. 2by either one or both of the field validation application19-1and/or the field validation process19-2. For purposes of the discussion of the operation of embodiments of the invention, general reference will be made to the field validation applet19as performing the various steps and operations to carry out the features of embodiments of the invention.

Is to be understood that embodiments of the invention include the field validation application19-1(i.e., the un-executed or non-performing logic instructions and/or data) encoded within a computer readable medium such as a floppy disk, hard disk or in an optical medium, or in a memory type system such as in firmware, read only memory (ROM), or, as in this example, as executable code within a memory system such as memory system22(e.g., within random access memory or RAM). It is also to be understood that other embodiments of the invention can provide the field validation application19-1operating within the processor24as the field validation process19-2. While not shown in this example, those skilled in the art will understand that the client10may include other processes and/or software and hardware components, such as an operating system, which have been left out of this illustration for ease of description of the invention. In addition, the display32need not be coupled directly to the computerized device. In such cases, the field validation applet19can execute on one computerized device and can be remotely accessed, for example, over a network in which case the graphical user interface is displayed locally to the user, while the field validation process19-2is executed remotely.

Directing attention now to the graphical user interface, when the field validation process19-2operates within the client10, a user can use the input device30to control an input selector such as a mouse pointer to perform to direct “focus” to specified displayed graphical elements, such as data entry fields and icons, according to the embodiments of the invention. The processor24performs the field validation process19-2to carry out this processing as explained herein. Specific operations of embodiments of the invention are discussed next with reference to a flow chart of processing steps inFIG. 3and exemplary graphical displays in the remaining Figures.

Turning now toFIG. 3, at step34the field validation applet19displays one or more data entry fields on the display32, for example as part of displaying the Web page18. The result is shown inFIG. 4, in which the data entry field of interest is the Last Name field36. The field36contains a graphical validation indicator38, which in the illustrated embodiment takes the form of a circular icon including the script letter “i”. It is assumed that the field36is not initially the object of user “focus”, i.e., the user has not placed a cursor in the field36or otherwise selected the field36. In this case, the validation indicator38has a de-emphasized or faded appearance.

FIG. 5shows the result when a user subsequently directs focus to the Last Name field36, such as by placing a cursor40therein. In this case, the validation indicator38takes on a non-faded or neutral appearance, providing a visual indication to the user that the field36is the object of focus. It will be observed that in other fields such as the City field42that is not the object of focus, the validation indicator44retains the de-emphasized appearance.

Referring again toFIG. 3, in step46the field validation applet19responds to user activation of a validation indicator by displaying a first message that describes one or more expected characteristics of the data to be entered into a data entry field. An example of the result is shown inFIG. 6, in which the field of interest is the ZIP code field48and the message is displayed in a message box50. User activation is accomplished for example by the user “mousing over” or “hovering” on the location of the validation indicator with a pointer52(seeFIG. 6). In the illustrated example, the message describes a characteristic of a valid U.S. ZIP code, namely that it uses only numbers. The message box50is a pop-up message box that is placed immediately adjacent to ZIP code field48. Although immediate adjacency is not required, it is preferable that the message be displayed in a manner that visually associates it with the data entry field to which it pertains.

In the illustrated example, the message box50is filled in a semi-transparent manner, which can be especially useful if it is displayed on top of navigable features of the graphical user interface. The message box50may alternatively employ an opaque background. The validation indicator54is moved from the data entry field48into the message box50, providing visual information to the user regarding the function of the message and its association with the data entry field48. The outline of the message box50is visually neutral, and the validation indicator54has the same neutral appearance as the validation indicator38ofFIG. 5. Although not specifically shown in the Figures, the activation of the validation indicator54and the displaying of the message box50can also occur when the data entry field48is not the object of user focus. In that case, the validation indicator54appearing in the message box50has the same de-emphasized appearance as the validation indicator38ofFIG. 4.

In the illustrated embodiment, the validation indicator54appears at the far right of the message box50. It will be appreciated that in alternative embodiments the location of the validation indicator54may be elsewhere within the message box50, and that the location may be determined either statically or dynamically. Also, the moving of the validation indicator54into the message box50is itself optional—it may be desirable in alternative embodiments to leave the validation indicator54in the data entry field48.

Referring again toFIG. 3, in step56the field validation applet19monitors the entering of data into the data entry field48, such as typically accomplished by a user via a conventional keyboard device (not shown in the Figures). The entered data is continually compared with information within the field validation applet19describing the expected characteristics of the data, such as the requirement for only numbers in a value entered in the ZIP code field48. This comparison can take the form, for example, of determining whether the ASCII code for an entered character falls between the respective ASCII codes for the digits “0” and “9”. If the entered data is consistent with the expected characteristics of the data (e.g., the ASCII code falls between the codes for “0” and “9”), then the data entry field48and the validation indicator54continue to be displayed with a neutral appearance, indicating to the user that the data entry process is proceeding normally.

If during the data entry process the entered data is found to be inconsistent with the expected characteristics of the data (e.g., an ASCII code is not between the codes for “0” and “9”), then the data entry field48and validation indicator54are given a more visually emphasized appearance to visually indicate to the user that erroneous input data has been detected. An example is given inFIG. 7, in which the lowercase letter “o” has been entered as part of the ZIP code. The border of the data entry field48is changed to an error-indicating color, such as red, that stands out from the color of the field48itself. Also, the color of the validation indicator54is changed to the error-indicating color. These changes in the display alert the user to the presence of an error in the field48.

Referring again toFIG. 3, in step58the field validation applet19responds to user activation of the visually emphasized validation indicator54, such as by mousing over the validation indicator54as described above, by displaying a second message that describes how the entered data is inconsistent with the expected characteristics of the data expected in the data entry field48. An exemplary result is shown inFIG. 8. In the illustrated example, this message again describes the requirement for only numbers in a valid ZIP code, and points out that “o” is not a number. Because the second message is displayed after a specific error has been made, the second message can be more specifically tailored to provide the user with information about how to correct the specific error. It will be appreciated that such a tailored message is necessarily generated dynamically. For example, there may be multiple types of second messages pertaining to different expected characteristics of data to be entered, such as whether it is numerical, whether it is text-only, etc. Then, depending on the type of error made by the user, a given message can be selected from among the multiple types of second messages. It may be desirable in alternative embodiments (e.g., for simplicity) to utilize statically generated second messages.

As shown inFIG. 8, the second message is displayed in a pop-up message box60. With respect to the positioning and background color of the message box60, considerations apply that are similar to those discussed above in connection with message box50. The validation indicator54is moved into the message box60and is displayed with the error-indicating color. The border of the message box60also has the error-indicating color.

FIG. 9illustrates a condition in which correct data (such as the value 94107) has been entered in the ZIP code field48. It will be noted that the appearance of the validation indicator54has reverted to the faded or non-emphasized appearance. InFIG. 9, the various fields in the user interface screen have all been filled in, and therefore a Submit button62is made available to enable the user to submit the form. When the user does so, the data from the various fields is provided to the application program that is executing on the server12(FIG. 1). Because the client10itself has validated the entered data, there is no possibility of any subsequent re-posting of the Web page18due to the presence of invalid data.

FIG. 10illustrates an alternative presentation of the messages associated with the field validation process. The messages are displayed in a message box64that is more visually integrated with the field48. In particular, the top of the message box64is co-incident with, and thus visually connected to, the bottom border of the data entry field48. The message box64thus appears as an extension of the data entry field48. The illustrated arrangement can be used for both the non-error condition and the error condition, which is the specific condition shown inFIG. 10.

The manner in which the message boxes50,60and64appear on the display can be animated in different ways. One basic approach is to display the message box abruptly or instantaneously, i.e., to immediately transition from having no message box on the display to having the message box with full intensity. As an alternative, the message box can be “faded in” or brought to full intensity gradually. For the more integrated message box64ofFIG. 10, it may be desirable that the message box64be displayed as gradually sliding downward from the data entry field48.