The user experience can be enhanced by implementing jQuery validate's focusInvalid() method. This will force the browser to focus on the first failed element whenever validation is failed.
Add a setting to the module and update the javascript to read/react to the new setting.
Adds support for jQuery Validate's focusInvalid() method.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | clientside_validation-add_focusinvalid_support-3162213-05.patch | 4.65 KB | ddiestra |
| #2 | clientside_validation-add_focusinvalid_support-3162213.patch | 4.94 KB | andyg5000 |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
andyg5000Comment #3
nikunjkotechaHi Andy,
This seems to be working out of the box, can you please share more details under which scenario it doesn't focus on first input with error for you?
Example: https://www.footlocker.com.sa/en/contact
Comment #4
erier commentedI believe andyg5000 is asking for focusInvalid() to be an optional setting. On a current project, I'm looking for the first field to not be auto-focused on invalid. This would help
Comment #5
ddiestra commentedPorting the patch for version 4.x
Comment #6
danflanagan8> This seems to be working out of the box, can you please share more details under which scenario it doesn't focus on first input with error for you?
I am using clientside_validation_jquery 4.1.2 with https://cdn.jsdelivr.net/npm/jquery-validation@1.21.0/dist/ from the cdn in conjunction with webform 6.3.x. When we have a webform with an ajax submit, the window is not automatically scrolling to the first invalid element upon (unsuccessful) submission. When there's no ajax, the focus works fine. It seems to be the introduction of ajax that matters.
I hacked the module locally to use the same approach as the patch in #5 and my UX problem was solved!
The patch itself seems to have some problems. It introduces a new setting
focus_on_failed_validation, but it seems to accidentally check the value ofvalidate_all_ajax_formsin logic that should be considering the new setting.Comment #7
danny englanderComment #8
danny englanderComment #9
danny englanderComment #11
danny englanderMR: https://git.drupalcode.org/project/clientside_validation/-/merge_request...
Patch: https://git.drupalcode.org/project/clientside_validation/-/merge_request...
Comment #12
danny englanderComment #13
danflanagan8Thanks, @danny englander!
The new patch/MR works perfectly for webforms using ajax.
However, when the webform does not use ajax, the new setting is not honored: the focusInvalid happens regardless of the setting.
So what to do? If it were up to me, I would say that we don't expose a new setting. While @erier seems to have a use case for disabling focusInvalid, I suspect that disabling focusInvalid would be a rarely used feature.
I think we should just update the js such that the focusInvalid always happens on ajax submission the same way it always happens on non-ajax submission.
Maybe there could be a followup issue to expose the setting. That issue could be picked up by someone who sees value in exposing the setting.
Comment #14
danny englanderComment #15
danny englanderI updated and simplified the MR, @danflanagan8 is on the right track here. I backed out the UI setting (which would have needed an updated hook anyway) and now it just works with Ajax and non-Ajax forms.
Comment #16
danny englanderComment #17
danny englanderHere is the latest patch Patch: https://git.drupalcode.org/project/clientside_validation/-/merge_request...
Comment #18
danflanagan8The MR looks good now.
The first invalid element gets focused upon submit with or without ajax submission. There's no new setting for reasons I described in #13.