Question

From the submit button’s onClick, I am displaying a validation error in a DIV with:

msgStr = validate(...);
document.getElementById("msgArea").innerHTML = msgStr;

But if the user clicks submit again (possibly changing the data but getting the same validation error), there is no feedback to them that the submit actually did anything. The page sits there “frozen” (to the user).

I tried to clear the area before calling validation with:

document.getElementById("msgArea").innerHTML = '';
msgStr = validate();
document.getElementById("msgArea").innerHTML = msgStr;

but this doesn’t show any effect. I assume that either the browser doesn’t have time to update the rendering before the same msgStr is set, or it happens so quickly that the user doesn’t see the “flash”.

Any suggestions on how to provide feedback in this case?

Answer 1

It’s most likely that you don’t see it change because the flash is too fast. If you’re using a javascript library (jquery, yui, etc…), you can use a fade in function to make it more noticeable. If not, you can use a series of timers and style changes to make the change more noticeable. Here’s a fiddle that demonstrates how to do that: http://jsfiddle.net/cbargren/S6ZjC/