Big usability problem with validators

[Alan Silver]

Hello,

If you add (say) two text boxes to a form, then add a validator with
some simple rule for one of them, you can observer the following
problem:-

Type some erroneous value in the text box with the validator, then click
on the other text box. This makes the validator's red error message
appear. Now, change the invalid text to something valid, and without
clicking anywhere else, click the submit button.

What happens? The validator is fired again, turning off the error (as
the text is now valid) BUT THE FORM DOES NOT SUBMIT!!! You have to click
the submit button a second time to submit it.

This is a serious usability issue, as the majority of people would sit
looking at the page, waiting for it to do something. The page would sit
there looking at them, waiting for them to do something.

Guess who will get bored and go somewhere else first?

Anyone got a fix for this issue? TIA

 

[Peter Blum]

Hi Alan,

Unfortunately, its not a validator problem as much is its a limitation of
the browser.
1. The Validator hooks up to the onchange event of the textbox to show and
hide itself after and edit
2. The button will only fire when the click is completed on top of the
button. (So if you click a button and drag off, release the button does not
fire.)
3. The browser fires the onchange event before it executes the click code of
a button.
4. The validator has rearranged the page as it hides itself (during the
onchange event). This moves the button out from under the mouse.

The only solution is to design your page with this in mind. Position the
button above, use Validator.Display=Static, use absolute positioning, etc.

--- Peter Blum
www.PeterBlum.com
Email: (e-mail address removed)
Creator of "Professional Validation And More" at
http://www.peterblum.com/vam/home.aspx

 

[Alan Silver]

Peter,

Thanks for the advice. When you say I should position the button above,
do you mean physically above, as in within the source? If not, what did
you mean?

Thanks again

Hi Alan,

Unfortunately, its not a validator problem as much is its a limitation of
the browser.
1. The Validator hooks up to the onchange event of the textbox to show and
hide itself after and edit
2. The button will only fire when the click is completed on top of the
button. (So if you click a button and drag off, release the button does not
fire.)
3. The browser fires the onchange event before it executes the click code of
a button.
4. The validator has rearranged the page as it hides itself (during the
onchange event). This moves the button out from under the mouse.

The only solution is to design your page with this in mind. Position the
button above, use Validator.Display=Static, use absolute positioning, etc.

--- Peter Blum
www.PeterBlum.com
Email: (e-mail address removed)
Creator of "Professional Validation And More" at
http://www.peterblum.com/vam/home.aspx

 

[Peter Blum]

The goal is to prevent the button from moving. If the validators are
resizing the area that they contain, they push HTML that is to the right and
below. By "above", the button some come earlier in the HTML and appear
visually higher on the page.

--- Peter Blum
www.PeterBlum.com
Email: (e-mail address removed)
Creator of "Professional Validation And More" at
http://www.peterblum.com/vam/home.aspx

Peter,

Thanks for the advice. When you say I should position the button above, do
you mean physically above, as in within the source? If not, what did you
mean?

Thanks again

 

[Alan Silver]

The goal is to prevent the button from moving. If the validators are
resizing the area that they contain, they push HTML that is to the right and
below. By "above", the button some come earlier in the HTML and appear
visually higher on the page.

Thanks for the clarification. That makes life very difficult as using
static validators means wasting a lot of space for messages that may
never appear.

My guess is that it is the summary that is causing the problem as the
form I'm considering has one of the two submit buttons (and the one most
likely to be used) at the top, but below the summary. I'll try moving
the summary below the button and see if it helps.

Thanks again

--- Peter Blum
www.PeterBlum.com
Email: (e-mail address removed)
Creator of "Professional Validation And More" at
http://www.peterblum.com/vam/home.aspx