I know these form validation entries are getting dull. But it’s a major project and has led to some interesting/frustrating issues.
For example- we wanted to be able to automatically scroll a user directly to the spot on the form where they had the error. The simple way is to use input.focus – works fine if there’s just one error. But there were some drawbacks:
1) Can’t seem to ‘focus’ a checkbox or radio group.
2) If multiple errors, it could focus one field, then another, then another in quick succession- a very confusing user experience.
3) The focus option didn’t scroll the screen high enough for the user to see the field label. Sure, it’s easy to scroll up a bit to see what they need to enter, but again, not good user flow.
The answer? Arrays in action!
We created a resultArray variable- on each check in the $(form).on(‘submit’) handler, if something failed, we pushed that jquery object to our resultArray. Then, at the end of all the checks, we $(body, html).animate() to 50px above the entry at resultArray (found by getting resultArray.offset().top – 50).
And it seems to work great! The array holds all errors- we can then scroll directly to whatever one is first in that array. The project is about a week away from being done- so probably only one or two more entries on this. Next week- the process of inserting ‘live’ checks, so a user can get real time feedback on fields that initially gave an error, but may have been fixed. It was an interesting balance of enough feedback to let them know that ‘this field is now good to go’ with ‘stop giving me an update every time I type a damn key’. Hopefully we got it right.