After trigger checkboxes require message(client-side validation), next submmit will not trigger its next required field's mandatory message.

Steps to reproduce:

  1. Create required checkboxes and required other fieils for form, this is my form source below.

  2. Click Submit for the first time, trigger checboxes's mandatory message, the display is normal.

  3. Check the non-first option of checkboxes, then click submit buttom, its next required field's mandatory message will not be triggered.(I think it should be triggered)

test_checkboxes:
  '#type': checkboxes
  '#title': 'Test Checkboxes'
  '#description_display': invisible
  '#options':
    A: OptionA
    B: OptionB
    P: Others
  '#required': true
  '#required_error': 'Please select your option.'
test:
  '#type': textfield
  '#title': test
  '#required': true
test_select:
  '#type': select
  '#title': Type
  '#title_display': invisible
  '#description_display': invisible
  '#options':
    A: optionA
    B: optionB
    C: optionC
  '#empty_option': 'Test Type'
  '#required': true
  '#required_error': 'Please select Type.'
CommentFileSizeAuthor
#32 3209439-33.patch1.38 KBjrockowitz
#26 3209439-26.patch1.08 KBjrockowitz
#25 3209439.gif3.78 MBpaulocs
#20 fixed_wf.gif1.82 MBguilhermevp
#20 chrome-capture (2).gif2.41 MBguilhermevp
#19 Screenshot from 2021-05-04 19-31-03.png27.09 KBpaulocs
#17 Screenshot from 2021-05-04 15-03-55.png79.13 KBpaulocs
#15 Screenshot from 2021-05-04 10-30-15.png49.91 KBpaulocs
#13 3209439-14.patch1.08 KBjrockowitz
#12 ScreenFlow.gif587.18 KBjrockowitz
#12 webform.webform.issue_3209439.yml5.3 KBjrockowitz
#9 3209439-9.patch893 bytesOmega_yang
checkboxes_form.png11.45 KBOmega_yang

Comments

Omega_yang created an issue. See original summary.

Omega_yang’s picture

Omega_yang commented
Omega_yang’s picture

Omega_yang commented
Assigned: Unassigned » Omega_yang
Omega_yang’s picture

Omega_yang commented
Issue tags: +checkboxes
Omega_yang’s picture

Omega_yang commented
Component: User interface » Code
Omega_yang’s picture

Omega_yang commented

After verification， this issue also exist in latest version of webform(6.0.2).

Due to execute setCustomValidity() after click submit trigger 'invalid' function, first Submit set custom validity, second submit clear custom validity.

I think can add setCustomValidity function to click function.(Please correct me if it is wrong, thanks.)

Omega_yang’s picture

Omega_yang commented
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Version: 8.x-5.13 » 8.x-5.x-dev
Assigned: Omega_yang » Unassigned
Issue tags: -checkboxes
Omega_yang’s picture

Omega_yang commented
StatusFileSize
new 3209439-9.patch893 bytes
jrockowitz’s picture

jrockowitz commented
Status: Active » Needs review
paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
Status: Needs review » Needs work

Patch can't be applied to the 8.x-5.x branch.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new webform.webform.issue_3209439.yml5.3 KB
new ScreenFlow.gif587.18 KB

The attached webform replicates the awkwardness of the checkboxes' clientside validation.

jrockowitz’s picture

jrockowitz commented
Status: Needs work » Needs review
StatusFileSize
new 3209439-14.patch1.08 KB

The attached patch improves the UX by hiding the error message when any checkbox is checked.

This patch probably needs so additional work for checkboxes with other, check all, or check none options

jrockowitz’s picture

jrockowitz commented
New community member and active community member requests will be prioritized.
Please consider getting involved, funding development, and hiring professional support.
paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
StatusFileSize
new Screenshot from 2021-05-04 10-30-15.png49.91 KB

Hello!
I'm trying to test it, but my message errors look different.
I have webform_clientside_validation module and its requirements installed.

See in the image I attached how the errors are displayed. Do I need to enable any other module?
I imported webform #12 and I'm using webform 8.x-5.x.
Ps: I didn't apply patch #13.

jrockowitz’s picture

jrockowitz commented

What Drupal version and base theme are you using?

In the webform_clientside_validation there is some JS to address the error message placement issue.

@see webform/modules/webform_clientside_validation/js/webform_clientside_validation.ife.js

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
StatusFileSize
new Screenshot from 2021-05-04 15-03-55.png79.13 KB

I have a fresh drupal 8.9.14 version installed and I'm using Bartik as theme.
I notice that webform_clientside_validation.ife.js is loaded if inline_form_errors is installed, so I enabled but it didn't resolve the problem.
I'll let someone else review this issue and see if I can figure out what is going on.
I attached a image that shows my problem after I installed inline_form_errors.

jrockowitz’s picture

jrockowitz commented

Are any errors being logged in the browser's JS console:?

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
StatusFileSize
new Screenshot from 2021-05-04 19-31-03.png27.09 KB

Nothing related to it.

guilhermevp’s picture

guilhermevp commented
StatusFileSize
new chrome-capture (2).gif2.41 MB
new fixed_wf.gif1.82 MB

I was able to reproduce the error the same way @jrockowitz showed in comment #12, and patch fix it for me. Not moving to RTBC due to further discussion from #15.

fixed

jrockowitz’s picture

jrockowitz commented

We need to the know the steps required to reproduce the issue from #15

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented

I'm getting in contact with @guilhermevp to see if I'm missing something.
Feel free to fix the issue as #15 is maybe not related to this issue scope.
I'll keep you updated.

Cheers, Paulo.

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented

We found the problem. The thing is that I was using clientside_validation 3.0.x and not clientside_validation 3.0.0-rc4.
After I checked out 3.0.0-rc4 tag I was able to see the message in the right place.
This issue that affected it: https://www.drupal.org/project/clientside_validation/issues/3208810

Thanks!

jrockowitz’s picture

jrockowitz commented

Is this RTBC?

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
Status: Needs review » Needs work
StatusFileSize
new 3209439.gif3.78 MB

No, I found a bug. Steps to reproduce:
1) Check the first option
2) Check the last option
3) Unchecked the first option
4) Unchecked the last option
5) The error message is not displayed.

I added a gif.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new 3209439-26.patch1.08 KB

The issue is the first option has an event handler set via the clientside validation module which is also hiding the error message.

I am not sure we are going to find a perfect solution.

The attached patch removes the error when any checkbox is checked. The first checkbox can retriggers the disease of error message.

jrockowitz’s picture

jrockowitz commented
Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 26: 3209439-26.patch, failed testing. View results

jrockowitz’s picture

jrockowitz commented
Status: Needs work » Needs review
paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented

Yeah, I tried this approach locally but I didn't add any patch because IMHO #13 is better because it triggers something when the user doesn't select anything.

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented

Patch #13:
1) Check the first option
2) Check the last option
3) Unchecked the first option
4) Unchecked the last option
5) The error message is not displayed but the icon is.

Patch #26:
1) Check the first option
2) Check the last option
3) Unchecked the first option
4) Unchecked the last option
5) Nothing is triggered.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new 3209439-33.patch1.38 KB

This patch includes a workaround.

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
Status: Needs review » Reviewed & tested by the community

Looks good!

  • jrockowitz authored 2fcc5b0 on 8.x-5.x 
    Issue #3209439 by jrockowitz, Omega_yang, paulocs, guilhermevp:  After...
jrockowitz’s picture

jrockowitz commented
Status: Reviewed & tested by the community » Fixed

  • jrockowitz authored 2fcc5b0 on 6.x 
    Issue #3209439 by jrockowitz, Omega_yang, paulocs, guilhermevp:  After...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.