Click here to Skip to main content
14,421,741 members
Rate this:
Please Sign up or sign in to vote.
In a validation script, I set the class of invalid elements so that they are rendered in red, then display an alert asking the user to correct the highlighted errors.
However in Chrome, the alert is displayed before the element is re-drawn. This could lead to confusion for the user since there are no highlighted fields.
When you step through the code, all works fine as the page is redrawn at each step.

In Firefox, the browser displays a semi-transparent background behind the alert box, and the rendering of the error input box is updated before the alert. Edge behaves similarly (but with a white semi-transparent layer instead of black). IE also redraws the error field but doesn't use the semi-transparent layer.

What I have tried:

Although it seems the "wrong" approach, I tried putting the alert into a setTimeout call, delaying the alert by a second (or more or less). However this doesn't have the required effect; the re-render of the highlighted input box still doesn't occur until after the alert box is shown.

I've also tried
but no help...
Googling suggests others have had similar problems and found that querying the offsetHeight may force Chrome to redraw, but that workaround doesn't work in current versions of Chrome.

See my demo page at[^]
Updated 31-Oct-19 16:07pm
Rate this:
Please Sign up or sign in to vote.

Solution 1

Not a solution for this; but a suggestion or two...

Don't use the generic "alert" function. Try using a Modal window and give the end user a pleasanter experience. A great example would be phone number validation, where you could give various formats that are accepted.

Another option would be to have two separate validation routines; one changing the color to red on various events (onblur, etc) to change the color, and then the "submit" validation which pops up that they have fields to fix
F-ES Sitecore 1-Nov-19 5:31am
I wouldn't even use a modal, just leave the fields red and show a message under each box saying what the problem is.
DerekT-P 1-Nov-19 18:16pm
Thanks MadMyche and F-ES Sitecore for your suggestions. In this instance the message is only shown if the user tries to submit the form without first at least having tabbed through the form fields. If a field is invalid on "Blur" then it's flagged as an error immediately, so the need for an explicit pop-up message is just as a "back-stop" and should be rarely encountered. There's a (low) fixed budget and even swapping a simple "alert" statement for a modal popup takes development and testing time for a feature which will only be very rarely used. In other situations I do use modal messages and/or messages under/next to error fields. A problem with the latter is that they can make the form layout "jump around" (or at least the window to scroll) which can be irritating. On the desktop I prefer to use mouseover pop-ups (non-modal) to give additional feedback, but they're not so great on mobile devices.
Rate this:
Please Sign up or sign in to vote.

Solution 2

It might be worth it to read this: Concurrency model and the event loop - JavaScript | MDN[^]

Basically your solution of using setTimeout should work something like this CodePen[^], if you compare that to your attempt at using set timeout I think you'll find you probably accidentally moved the code setting the class inside the setTimeout event handler - if not you should post that code as well.

The problem you're have can be explained by how browsers render the page. Essentially the browser is single threaded, and the browser rendering is paused while your code is executing, and will do all updates after your code finishes running.

The reason calling set timeout for a single millisecond works, is that it finishes executing your code for the browser to run one render pass, and then executes the timeout event as soon as the render has completed.
DerekT-P 1-Nov-19 18:23pm
Thanks Dar. Yes, I'd understood the single-threading but taken an inappropriate shortcut on the setTimeout! i.e. setTimeout(alert('message'),100) rather than enclosing the alert within a function. Doh.
It resolves the issue but still feels like an ugly kludge, and one that isn't necessary for Edge, IE or Firefox. Oh well.
Thanks again for taking the time to reply and provide a working example!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100