validate.js is responsible for validating fields on a form on clicking the submit button but before the form is actually posted.
when a required field is not filled, that field will be focused and 'marked' so the user can correct it.
When you have a form with conditional displaying fields (using showon) and you hide a required field, then validate.js will throw an error and you cannot submit the form.
The invalid form control with name=‘jform[xyz]’ is not focusable.
this is happening because showon.js will set class hidden on the parent wrapper for the required field and validate.js doesn't check the computed CSS style (which is display: none, but the display state of the element itself (which is not set)
The solution here is /cound be (?) to have validate.js do a check like this in line 573 (untested / unconfirmed if this is working):
element.getAttribute('disabled') === 'disabled' || element.closest('[style*="display: none"]') !== null
validate.js is responsible for validating fields on a form on clicking the submit button but before the form is actually posted.
when a required field is not filled, that field will be focused and 'marked' so the user can correct it.
When you have a form with conditional displaying fields (using showon) and you hide a required field, then validate.js will throw an error and you cannot submit the form.
this is happening because showon.js will set class hidden on the parent wrapper for the required field and validate.js doesn't check the computed CSS style (which is display: none, but the display state of the element itself (which is not set)
The solution here is /cound be (?) to have validate.js do a check like this in line 573 (untested / unconfirmed if this is working):