Giters

jquery-validation / jquery-validation

jQuery Validation Plugin library sources

Home Page:https://jqueryvalidation.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

aria-invalid not applied when submitting empty required fields

eden-jh opened this issue · comments

commented

When a form is submitted, any required fields that are empty are given an error message and an error class, but the aria-invalid attribute is not added. Other types of errors (like an invalid email address) are given aria-invalid on submit, but not empty required fields.

This means that anyone using the error class as a selector for error styles (rather than an [aria-invalid="true"] selector) will be conveying the error state of those fields visually and not semantically, and anyone using [aria-invalid="true"] as a selector for error styles won't have the error state conveyed visually or semantically.

(Empty required fields are only given aria-invalid when the form is submitted and then the individual field is blurred.)

It looks like this can be resolved by moving the aria-invalid toggle into the highlight and unhighlight functions, not sure if there was a reason this wasn't done already. (Something may also need to be done for reset.)

Your environment

  • version of jquery-validate: 1.19.3
  • jQuery 3.6.0 (also encountered with 3.2.1)
  • which browser and its version: Chrome v93.0.4577.82 and Firefox Developer Edition v94.0b9

Steps to reproduce

CodePen Example

  1. Enter "a" in the Email field.
  2. Hit the enter key to submit the form (Note: moving focus outside the email field before activating the submit button with mouse or keyboard will also result in the same errors on both fields, but clicking submit with your mouse without first moving focus outside the email field causes an error message on just the email field, which may be a separate bug)

Expected behaviour

The name and email fields are both given aria-invalid="true" along with the error message and class

Actual behaviour

Only the email field is given aria-invalid="true" and both fields are given the error class. The name field does not have the aria-invalid attribute added, only the error message and the error class.

Demo form with the previously described error markup showing in the Dev Tools Inspector tab. The ID and name of the name and email inputs are 'name' and 'email' respectively, and both are associated with their error messages via aria-describedby. The error style is applied to a selector using the aria-invalid attribute, so it applies to the email and not the name.

Screenshot is from Firefox developer edition.

After submitting the form following steps 1 and 2 under Steps to Reproduce, the following additional steps will cause the aria-invalid attribute to be added to an empty required field:

  1. Move focus to the name field
  2. Tab away from it without entering any content
  3. Notice aria-invalid is added be added.

I mention this mainly for context/completeness.

commented

Looks like aria-invalid is only ever set in the element function, which is not called for all fields when the form is submitted. It's not the submit event that's causing aria-invalid to be added for fields with other types of errors, it's happening because pressing enter to submit is also a keyup, and clicking/tabbing to a submit button is a focusout.

commented

This issue/proposal has been automatically marked as idle and stale because it hasn't had any recent activity. It will be automatically closed if no further activity occurs. If you think this is wrong, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up.
Thank you for contributing :)

commented

This issue persists in 1.19.5. I assume this will not be fixed?