Bug: Validation Error Message Persistent after correct input

[aijosh]

Hello,

I get this issue where when the user types in a wrong value and the validation error is shown, after the correct value is inputed, the error would still remains visible. This is a headache because the user now gets confused and tries other incorrect values. The only way the error disappears is to click out of the element (not all users would know to do this)

Also the error displays on autofill or copy/paste even though the values autofilled or copy/pasted are correct.

NB: I have ajax set

 

[cheesegrits]

Can you point me at an example page.

-- hugh

 

[aijosh]

You can test the sign-up page. /sign-up

 

[cheesegrits]

I get this issue where when the user types in a wrong value and the validation error is shown, after the correct value is inputed, the error would still remains visible. This is a headache because the user now gets confused and tries other incorrect values. The only way the error disappears is to click out of the element (not all users would know to do this)

Can you give me an exact set of steps to reproduce this? I'm just not sure what you mean.

For example, do you mean ... type in something incorrect (like a space in the "First Name"). Blur the field (click outside, or tab) so the validation runs. The error pops up, and the field color is set to red. Click back in and correct it. But until the field is blurred again (so until validation runs again) the red error indication remains.

Is that what you mean? That the red error indication remains until the field is blurred and validation re-runs?

If so, what behavior would you prefer? That the error indication is removed as soon as you re-focus into the field?

-- hugh

 

[aijosh]

Ok.

I tried replicating some of my initial complains and I cant seem to replicate them again.

The only one I can currently replicate is.

Pre test:
Fill in any form online and tell the browser to remember form data.

Test:
Fill the sign-up form on the website and instead of typing the information, click on the text presented to you by autofill.

Issue:
The error pop-up shows on the form field even when the data inputted is correct.
Note: At this point, the cursor is still active in the field.

Confusion:
User tries to manually correct the already correct data.
The error pop-up is still active. User keeps reading error message trying to figure out what is not correct even though data entered is correct.

Error message only disappears after the user clicks out (but that wouldn't be till after the user has frustratingly tried all ideas and iterations to confirm why he/she is correct but the form is saying otherwise. Then decides to give up and try something else)
Note: Some users would just exit the page and say the form is not working.

NOTE: This test was done in MS Edge. Haven't tried another browser

 

[cheesegrits]

*sigh*

Yup, it is indeed messed up in Edge. I stuck some breakpoints in, and Edge is firing a 'blur' event when you click on the dropdown, *before* the selected value is assigned to the field. OK, the autofill dropdown is technically outside the field, but clicking on it doesn't remove focus from the field, so I don't get why they fire that.

Neither Chrome nor Firefox do that - in fact, they don't fire anything on the field with the focus till the user blurs. So there is no subjective difference to our code, as to whether the user types something and blurred, or selected the autofill and blurred. The result is obviously that when our validation JS fires on the 'blur', it works fine in Chrome and Firefox, but in Edge, we're validating an empty field.

The other BIG difference I noticed is that both Chrome and FF fire 'change' events for any other fields they change when you select your form fill. So if I select "Hugh" from Chrome or FF on "First Name", and it fills out my Last Name and Email fields, it fires change events for Last Name and Email immediately (although not on the First Name), then it fires a blur (and a change) on the First Name when I click or tab out of it.

However, IE doesn't fire 'change' for any other fields it fills. It seems to fire an 'input' for them, but I can't use that for validation, because 'input' fires for every user input in a field, ie. for every key press. So if I watch for 'input', I'd be running the validation for every letter typed.

I think I can mitigate this by listening for 'change' rather than 'blur', so at least in Edge it won't try and validate an empty field. But I'm kinda stumped on how to handle validation of any other fields Edge autofills.

I'm reluctant to commit that mitigating change just yet, as I need to run with it for a while and see if there's any unexpected side effects. If you want to try it (and I'd appreciate help testing), change this line ...

https://github.com/Fabrik/fabrik/blob/master/components/com_fabrik/models/element.php#L1248

... to ...

        $ar = array('id' => $id, 'triggerEvent' => $this->getChangeEvent());

That should make it so your field elements listen for 'change' rather than 'blur' for AJAX validation.

-- hugh