Form validation error for input type checkbox/radio

apigee / apigee-devportal-kickstart-drupal

A fast demo and starting point for Apigee Developer Portals for Drupal

https://www.drupal.org/project/apigee_devportal_kickstart

GNU General Public License v2.0

26 stars 34 forks source link

Form validation error for input type checkbox/radio #690

Closed ibilo closed 1 day ago

ibilo commented 1 month ago

I added a new checkbox field to the registration form and made it required. If all the required fields are filled except the checkbox, you should get a message like "Please check this box if you want to proceed", but in our case, we get an error in the developer tools like "An invalid form control with name='...' is not focusable.".

This works if this part of the CSS styles is disabled: https://github.com/apigee/apigee-devportal-kickstart-drupal/blob/4b4a12502df7cb726799bd5c19af6dd13a8ff589/themes/custom/apigee_kickstart/assets/css/apigee-kickstart.style.css#L18779

So any new fields with the type of checkbox or radio button will not be validated with "display: none" style.

kedarkhaire commented 1 month ago

Hi @ibilo Thanks for sharing the issue you faced, here we are considering the steps you took were via custom module and you altered this specific form, added this new checkbox field and a default form 'required' validation is set for it. Post that you are facing the above behavior.

Do let us know, if our assumption is right or if any other steps were taken, this will be helpful for checking the issue further.

Also do mention, the versions used.

Thanks!

ibilo commented 1 month ago

Drupal Version - 10.2.5 Installation profile - Apigee Developer Portal Kickstart Theme - Apigee Kickstart (default theme)

I am using the Apigee Kickstart as the default theme, and I didn't install any custom modules. I added a field from the admin panel by this URL path: "/admin/config/people/accounts/fields". Everything works fine if switch the Apigee Kickstart theme to let's say, Olivero. In your theme you hide the default inputs by replacing them with SVG icons and in this case the validation doesn't work because the default input, in my case a checkbox, is not displayed on the UI.

kedarkhaire commented 1 week ago

Hi @ibilo I checked the above-mentioned with provided steps, I am not able to reproduce this with the said versions. If there are any other points which we need to follow, to replicate the issue, feel free to share. Thanks!

kedarkhaire commented 1 day ago

Hi @ibilo Closing this issue, as we are not able to replicate it and considering it was due to another custom work as there is no reply for any other steps which leads to this issue. Anyways, if you found the steps to replicate the issue, feel free to reopen the ticket. Thanks!