Skip to content

Feature request - different errors in group #2417

Closed
@eden-jh

Description

@eden-jh

I need to show one error per validation method in the group, rather than one error per group. For example: "Field One and Field Two may not be longer than 10 characters." and "Field Three and Field Four are required", as separate but adjacent error elements, so that the aria-describedby on each field can point only to the appropriate message for each field. Currently all fields in a group are aria-describedby the same error, even if some of the fields in the group are valid. There needs to at least be an option to change this.

See related feature request for group messages and rules: #2416

I'm thinking this could be implemented as an option for backwards compatibility:

groups: {
    groupName: {
        fields: "fieldOne fieldTwo fieldThree fieldFour"
        groupByMethod: true
    }
}

I can think of multiple ways that the success setting could work here (is the message always blank on success, or is there ever any content that would necessitate an aria-describedby relationship to valid fields?), or we can decide that it's not compatible with this option.

Example

Demo steps

  1. Open the form demo
  2. In the First Name field, enter the digit 3
  3. Hit the tab key to move focus out of the First Name field
  4. Notice that an "Invalid format" message appears for the Name group
  5. Hit the Submit button to submit the form

Current behavior

There's one error message for the Name group, which says "This field is required." The "Invalid format" message is no longer there.

If you enter "Test" in the Middle Name and hit tab, the field is marked as valid but is still aria-describedby the error message.

Requested behavior

The "Invalid format" message and the required message are both displayed as adjacent elements. First Name is aria-describedby the format message. Middle Name and Last Name are aria-describedby the required message. (The message text should also be more user-friendly--"First Name cannot contain digits." and "Middle and Last Name are required."-- I just didn't implement that here for time reasons.)

If you enter "Test" in the Middle Name and hit tab, the field should be marked as valid, and it's aria-describedby attribute should be modified/removed (depending on whether there's another value) so it no longer points to the required message. (Also, in the user-friendly version of the message, the text is modified to "Last Name is required.")

Metadata

Metadata

Assignees

No one assigned

    Labels

    staleUsed to mark stale issues

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions