Adobe Captivate 5.x Widget: Text Entry Box Validator
Wish you could prevent people from entering garbage into your Text Entry Boxes (TEBs)? Using this interactive widget, you can go beyond Captivate’s typical validation and check dates, phone numbers, zip codes, email addresses or anything you want so you can collect the accurate data you need.
This interactive widget was created using the Developer friendlyframework.
Download the demo to see how it was built. The zip file also contains a custom caption type called Validator Red that is used in the demo for the MM/DD/YYYY validation. The .psd source files are included as well.
The Captivate 6.x version of this widget can be found here
What Does It Do?
It evaluates the text inside a Text Entry Box (TEB) and determines if it passes or fails your criteria. This is an interactive widget, meaning you can completely customize what happens when the success or failure occurs… like firing off an advanced action for example. The live demo capitalizes on this using advanced actions and user variables to achieve a validated form entry screen.
Possible Use Cases:
- Collect accurate data from your Learners
- Use validated data entry in software simulations
How does it work?
Watch the video as I build a sample using the widget:
Part 1: Setting up your objects on the stage
Part 2: Adding User Variables and Standard Advanced Actions
Part 3: Adding the final Submit Button
Each TEB on your screen will need a validator widget. We basically turn off all the TEB’s extra settings, captions, and even its submit button and make it a “dummy” TEB. We then add our own Captivate button. You can have one button per TEB or one button for the whole page. Using advanced actions and user variables, this button will determine if it’s OK to move to the next slide. The widget comes with the following preset validators:
- Alpha Only
- Date DD.MM.YYYY
- Date DD/MM/YYYY
- Date DD-MM-YYYY
- Date MM.DD.YYYY
- Date MM/DD/YYYY
- Date MM-DD-YYYY
- Date YYYY.DD.MM
- Date YYYY.MM.DD
- Date YYYY/DD/MM
- Date YYYY/MM/DD
- Date YYYY-DD-MM
- Date YYYY-MM-DD
- Numeric Only
- Required Field
- US Currency
- US Phone Number
- US Zip Code
The “Custom” preset allows you to use a regular expression to validate the text in the text entry box. If you need help generating a custom regular expression, one of the best tools I’ve found is RegExr which has an online version and a Desktop Adobe Air version. It has many prebuilt examples from the community and it’s free. If you need help with a particular expression, please leave a comment at the bottom of this post.
- Adobe Captivate 5.0 OR 5.5
- Publish for Flash Player 10+
- Ability to use advanced actions and Captivate user variables
Try Before You Buy:
You can download the trial version of the widget for testing in your own projects. It will allow you to do an F4 preview, an F12 preview in browser, or publish it to your local web server (localhost or 127.0.0.1). However, it will not function when published to a production web server. The trial version will display the CaptivateDev.com logo in the upper right corner of your project at runtime. To make this go away, you need to purchase the full version.Download Trial
Have a pre purchase question or need assistance? You can contact me directly using the contact form or drop a comment on this post.
Q: I’d like to validate something that is not in the preset list of validators. How do I do that?
A: Use the “Custom” validator option and plug in your custom regular expression. I’d do a Google search for the regular expression online and / or use RegExr find or build your expression. There are lots of resources out there. If you are still having trouble, drop a comment at the end of this post and I’ll help you.
Q: I need to validate a Student ID number that begins with 00 and has 7 digits (Ex: 0012345). Is this possible?
A: Absolutely! Use the “Custom” validator option and create your regular expression. If you need help, drop a comment at the end of this post.
Q: I’d like to set the tab order of the TEB on my form. How can I do that?
A: Typically, the tab order will move from top to bottom depending on the order you added your TEBs to the canvas. If you really want full control over the tab order, I’d recommend Chris Dorna’s Tab Order Widget.