Adobe Captivate 5.x Widget: Text Entry Box Validator

Text Entry Box Validator Properties

Adobe Captivate 5.x Widget: Text Entry Box Validator

$80.00$2,000.00

Clear selection
SKU: N/A.

Product Description

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 friendly CpGears framework.

Live Demo:

Live Demo   Download Trial

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.

UPDATE: August 17th, 2011: Two new features have been added. Validate after “X” Characters and Validate When Enter Key is Pressed. If you type, for example, a “5” into the “Validate after X Characters” field, when the Learner types the 5th character into the TEB, validation will automatically trigger with out the need to click a submit button or lose focus off the TEB. If you do not want to use this feature, type “1000” in the widget properties to effectively turn it off. If you decide to use the “Validate When Enter Key is Pressed” feature, once the Learner hits the ENTER key while inside the TEB, it will automatically trigger validation. Thanks to Bernhard Leitner who made this great suggestion! I’m always looking for ways to improve our widgets

Possible Use Cases:

  1. Collect accurate data from your Learners
  2. 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
  • Custom
  • 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
  • E-mail
  • Numeric Only
  • Required Field
  • URL
  • 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.

Requirements:

  • 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

Support:

Have a pre purchase question or need assistance?  You can contact me directly using the contact form or drop a comment on this post.

FAQ:

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.

Purchase:

  • http://twitter.com/Lilybiri Lieve Weymeis

    To change the tab order for TEB’s, you can simply rearrange them in the timeline because focus will be on the TEB that has its timeline in the highest position.

  • Dipen Patel

    I am creating a application in that I need limit the Maximum Character to 80 in text entry box. If user enters more than 80, it will show an error. Is it possible with this widget, how?

    Thanks
    Dipen 

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @google-baa751a3e1178efbcafe88059bb1c1e1:disqus :  Great question!!!  You would choose the “custom” validation type and use:^.{0,80}$ as your validator.  This will limit the TEB to 80 characters.  You’ll also want to type 81 in the “Validate after X characters” field.  This will trigger the validation on the 81st character letting your Learner know that they’ve typed in too much text.  If your using a multiline TEB (using the enter key to make a new line), you’ll want to UNcheck the “validate when enter key is pressed” checkbox so that hitting the enter key doesn’t trigger the validator.

  • Dan Henry

    I just downloaded the trial version so have not had much opportunity to explore yet, but I need to use a shortcut key to submit. Do shortcuts work with this widget? The issue — using the standard shortcut option in Captivate works only if I am not setting up validation. For example, the application I am simulating uses ] instead of Enter. Again, it works fine as long as I am not setting up validation, but once I do, the TEB simply accepts the shortcut key as part of the entry.

    Thanks,
    Dan

    • Anonymous

      @Dan Henry:  It works with the ENTER key or validates after X number of characters.  No other shortcut keys are currently supported.

      • Dan Henry

        Thanks, Jim. Just curious — have you encountered the above scenario? Any ideas for a workaround? Regardless, I do like your widget!

        Dan

        • Anonymous

          @Dan Henry:  It’s a bug.  I’d definitely report it to Adobe.

  • Stephen Pintauro

    I created a simple page with several TEB according to the tutorial directions.  But the date validation (for example mm/dd/yyyy) is not working.  I am fairly sure all of my variables and advanced actions are correct because if I change the validation type in the TEB from date validation to alph or email, etc., the page works perfectly. 
    Any idea what I may be doing wrong?
    Thanks,
    Stephen

    • Anonymous

      @bc30529c29881c5c92abe1c6648b60ee:disqus :  When you select MM/DD/YYYY, you’ll notice that the widget places  a regular expression in the “Regular Expression” field.  This shouldn’t be altered, but if it had been by accident, you can reset it by selecting something else, then selecting MM/DD/YYYY again.  I just ran a test using the widget and the MM/DD/YYYY expression and it worked for me.  I’d be happy to look at your .cptx project if you want to send it to Jim AT Captivate Dev dot com.  Make sure you clear any unused items in the library before sending it over.  This will reduce the file size.

      • Stephen Pintauro

        That appears to have fixed the problem!  I must have inadvertantly altered the expression.  Thanks, Jim.

      • Stephen Pintauro

        That appears to have fixed the problem!  I must have inadvertantly altered the expression.  Thanks, Jim.

  • Evan

    I use the TEBs as information entry boxes for variables that I use later in the quiz to populate a certificate of completion. If I am making dummy boxes to attach the widget, how do I collect the variable information I need?

    • Anonymous

      @Evan:  If I understand you right, you should be able to access the variable that’s associated with the standard TEB.  

      • Evan

        Hi Jim. Yes, you understand me correctly. For example, I use a first name box and a last name box to populate a certificate of completion at the end of the quiz. Will adding the validator affect this process? 

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @Evan:  Not at all.  The validator just validates the data going into the TEB.  The associated TEB variable gets populated just the same.

  • Chris Bland

    Is it possible to get the validator to work in the following way?

    TEB 1. user tpyes “test” (meaning that “test” will be correct not just 4 characters) On succes it advances the user to the next text entry box, on failure it will provide a caption.

    TEB 2. to be set up in a simmilar way.

    I am simulating codes that are typed and only that particular code not just a character length will be correct. Once the correct code is entered, you then advance to the second TEB where the user types another code.

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Chris Bland:  Yes it will work in either case.  For case 1, use a “Custom” validator type and put in your regular expression that will validate for “test”.  For case 2, you’d do the same thing except that on success, you would have an action to take the user to the next slide.

  • Wolnielsen

    Hi,

    I have just tried to setup a custom Validation Type and custom Regular Expression bwordb now that works fine, but as soon as I try and add a flag on the end it no longer works, ie bwordb/i Am I doing something wrong?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @71b15ab9a76e77d93261c8928c3a9815:disqus :  I don’t recognize that syntax for a regular expression.  What exactly are you trying to validate?

  • Evan

    Very elegant validator! Lovely work. I’m using the free trial and things look great on my registration form, but I’m having a problem. Whenever I click the Submit button on the preview mode, the FormValidation advanced action doesn’t take me to the next slide. Any suggestions?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Evan:  What does your AA look like?  Do you have an advanced action for the failure and success?  Are you attaching the AA to the widget itself?

      • Evan

        The AA for the submit is exactly as you demonstrated in your excellent video, except I changed the name of the submit button from btnSubmit to Button_5, which was the name of my submit button. I changed the Submit Button Item Name in all of the validation widgets to Button_5, as well.

        • Evan

          I have defined Variables for passfail for each entry field. I’ve also defined AAs for pass and fail for each field.

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @Evan:  Go ahead and send over your .cptx project.  It’s hard to visualize this without seeing the project.  Jim At Captivate Dev dot com

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @Evan:  Go ahead and send over your .cptx project.  It’s hard to visualize this without seeing the project.  Jim At Captivate Dev dot com

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Evan:  Just a follow up for others… make sure the TEB Item Name is correct in the widget’s properties

  • Altocumulus

    Very interesting widget :-)
    I played a little bit with the trial version but maybe not enough…

    I could not find how to do this:
    I would like to see users allowed to type only 1 character in the TEB and not only have a test on the first character typed, which is pretty nice by the way.
    In other words: how can I prevent users to type any other character(s) after the first one?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @6abcb410fb5eb84921e2766b33f8fad2:disqus :  There are two elements to configure.
      1.  What makes the answer correct or incorrect (the validator you choose)
      2.  When validation should occur

      For #1, you can choose the “custom” validation type and use ^.{1}$ as the validator.  For #2, you’ll want put a 1 in the “validate after X characters” filed.

      Example:  ^.{1}$The ^ is the beginning of the regexThe . matches any character including spaces.  If you wanted to match a specific character (like 5) you could replace the period with a 5:   ^5{1}$The {1} tells the expression that it must match exactly 1 character to be correct.
      The $ is the end of the regex

      You may also want to try ^.{0,1}$ for a validator depending on your needs.  The {0,1} tells the regex that it’s ok to have either 1 or no characters at all.  

      • Altocumulus

         Thanks for you quick reply :-)
        I tried your solution but it does not prevent to type more than 1 character even if it does the test on the first one.
        Anyway, I’ve found a solution on my own.
        I’ve linked the ‘on success’ action of the widget to this advanced action:
        – hide text entrybox
        – display an image with the right character

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @6abcb410fb5eb84921e2766b33f8fad2:disqus :  You’re right… it won’t prevent them from entering characters, but it will show a message of your choosing if they go beyond.  I like your solution of hiding the TEB.  I didn’t think of that.  Nice work!

  • Emailconnie2

    I want the learner to have an infinite amount of times to enter the correct 4-letter custom text. When the user types the wrong info….a fail message appears, but when you try again, it appears the validation is no longer validating after 4 characters. How can I set this up so that the validation keeps taking affect?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      Hi Connie,  You already know this, but for those reading the blog:  The latest version of the widget 5.7, fixes this issue.

  • Stephen Pintauro

    I have two TEB’s (for entering user First Name and Last Name).  I also have a check mark to appear when the validation is pass (FirstName_PassFail is assigned 1), and a text message to appear when the validation is fail (FirstName_PassFail is assigned 0).  For some reason which I cannot figure out, the FirstName fail text message is appearing when the page first loads.  The LastName validation is working perfectly, and everything that I can tell indicates that is is set up exactly like the FirstName TEB validation.  When I enter some text in the FirstName TEB, the fail text message disappears and the pass check mark appears (as intended).  I am sure the “Advanced Action” scripts are correct.  They are certainly the same for the the FirstName and LastName TEB’s (except for the variable names).  Any idea why the fail text message is appearing for the FirstName TEB when the page fist loads? 
    Thanks,
    Stephen

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Stephen Pintauro:  Triple check your widget settings to make sure the validator is connected to the correct TEB.  Also check your slide entry/exit events.  If it’s the first slide of the project, make sure to check the project entry action in your preferences.  If you’re still having trouble send your project to Jim AT Captivate Dev dot com.  If the file is large, send via dropbox.com

  • Ben Meite

    Hello Jim,
    Now that Cp6 is out, do you know if this particular widget works in Cp6? 

    • Ben Meite

      I just tested several projects where this widget was used and I confirm THIS WIDGET DOES NOT work in Cp6. Do you have any suggestion/workaround while we wait for the new version to come out?

      • http://twitter.com/CaptivatePro CaptivateDev.com

        @Ben Meite:  We are working on all of our widgets for Cp 6.  Adobe has changed the API (in a good way), but it has left us to refactor every widget we’ve ever made.  Stay tuned.

        • Ben Meite

           Do you have an approx date when the updated version of this widget will be released?

          • JimLeichliter

            The week of July 16th.

  • http://www.77post.com/ Tim Smith

    Hi Jim, thanks for making such a great widget(s). Saved us so much time!

    I currently have the TEB’s filled with default text so the user has examples of what to input in each field. How would you suggest I implement this validator in this type of scenario?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @587af51a000f9e9f53608bd6a1085d0b:disqus :  Try downloading the trial and see if it will meet your needs.  I suspect that having default text will not trigger validation until the user starts typing in the TEB.

  • Ben Meite

     This is the week!!! Any updates? :-)

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @google-28cac912374eef7135be7bf02e7920f0:disqus If you want to be updated the second I release the widget, please follow me on twitter @CaptivatePro .  I should be releasing many widgets this weekend.

  • http://twitter.com/CaptivatePro CaptivateDev.com

    The Reposition Close Captions widget has been updated for Captivate 6:
    http://captivatedev.com/2012/07/30/adobe-captivate-6-x-widget-reposition-closed-captions/ 

  • http://twitter.com/CaptivatePro CaptivateDev.com
  • Kevin

    After purchase, when do we receive the product?

    • JimLeichliter

      @Kevin: You should have received an email at your gmail account with credentials and a download link. Let me know if you did not get this.

  • Pingback: Cp5 – The Blog of Ian