Add errorMessage to ChoiceGroup Component

[Arknev]

Would like to add an errorMessage property to ChoiceGroup component that would function the same as it does on the TextField and DropDown components.

[dzearing]

What would be the use case? Just want to clearly understand.

[Vitalius1]

@Arknev can you give a rough description of the cases where you would need an error message on ChoiceGroup?

@betrue-final-final is there any practical cases from a design standpoint?

[Arknev]

I'm trying to duplicate our pattern that we used in CSOM/JSLink. We had logic that set the order of fields with some custom configuration. This allowed us to declare parent/child relationships, custom validation, insert headers, modify row layout, visibility, as well as setting fields to be editable or visible only to certain users based on our own role based security system. However, the default render of each field was always easy to get and return wrapped in our own code. With this pattern, all error message rendering was handled by SharePoint, we would just leverage script to determine validation and return helpful text.

In our classic template overrides, the custom validation we set would roll into the default validation and it was reliable. In the Fabric UI components, the methodology for setting and handling custom validation seems inconsistent. Some components have the errorMessage property, others have onGetErrorMessage, some have both, and some have neither. I think that in a form, if you are collecting data, you should also be able to validate it. I prefer the error messages appear in a consistent location with the same styling.

In my testing, if I have a Choice field set to render as a drop down with some validation like this:

=[Field] = "Choice 1"

I can trigger an error message in both classic and modern. However, if I set the same field to render as Radio Buttons, the field will validate as expected in classic but not in modern. In the modern list form it appears that the validation is ignored.

Because our forms can have complex business rules (i.e. government forms), every field could potentially be evaluated. I'm really looking for a consistent method of rendering error messages when one or more fields fail custom validation.

[micahgodbolt]

Sounds like we need to look at forms in general, and all elements that go inside of a form. It'd make sense to ensure that all of those elements can get an error message, though I think it's a valid question of HOW they get that error message. Do we add it directly to the control, or do we create some HOC that can wrap a form element and add error messages.

[micahgodbolt]

might be part of #5582

[trevonmckay]

We'd like to have a consistent experience for form validations. In one of our internal apps if a user clicks Submit before completing the fields they are presented with inline error messages per the screenshot. The Choice Group however does not have the inline error message but shows the required asterisk. It is my expectation that the Choice Group would too present a validation message below the options.

[elly0t]

While most components provided by this library have got the errorMessage field, it seems natural for ChoiceGroup to have the same consistent interface.

[paulgildea]

This feels like a form validation feature request that's across all input type experiences.

[prejedj]

Is this in the works at all? I'd like to be able to inform the user they must make a selection without having to add 10 lines of code

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.