Text Entry Boxes in HTML5

I am trying to solve for what I will say is a fussy TEB's in my project. Like many of posted this has become more of an issue with HTML5. In my current role I am creating content to train the use of our financial systems. So my focus is software simulations.

My current situation is that on some of the screens the TEB works as designed and some they do not. Here is my workflow on a TEB.

1: Add the TEB to the slide
TEB Style Tab
2: Check the Validate User Input (old habit) does not seem to be working now
3: Add Correct entries to the Correct entries box
TEB Actions Tab
4: Check Infinite Attemps
5: Set Shortcut to Tab (This is how the user interacts with the native application)
6:Set On Focus Lost to  Execute Advanced Actions (This is a shared Advanced Action used for every TEB in the project)
7: Check Failure in Display ( although this does not seem to show since I moved to HTML5)
8: Add a Text Caption and change the style that looks like the Failure Display in step 7
9: Fill in the Advanced action (See Images)
    The advanced action does this:
    a: Looks at the TEB variable to see what the learner entered. If the entry is correct it moves to the next slide.
    b: If the entry is incorrect it diplays the failure caption created in Step 8 and then hides it.
    c: the next three lines moves the playhead back so the learner can enter text again.

What I am seeing is the failure message shows most of the time on my TEB's but sometimes it does not. No matter what I do I can not get the failure to show. Now if the learner enters the correct text it moves on. The problem is if the learner enters the text incorrectly they never see the failure message instructing them to enter text again.



4: