A common design pattern when building applications that must prompt the user to enter a code (for example a login screen) is to provide data entry boxes for the user to type in the code. As the user types the code focus is automatically moved to the next box. Once the user has typed in all of the characters in the code, an Ajax callback is made to the server to validate the code. If the code is not valid, the control shakes (thus giving feedback to the user that they have not entered a valid code).

In this video we show how an Enter Code control can be added to an UX component.


Download component:
http://alphamediacapture.s3.amazonaws.com/videos/entercode.zip