Validation: Highlight the required fields when a user submits a form

[Itskiprotich]

Is your feature request related to a problem? Please describe.
With the SDC beta04, when I try to submit a form with unanswered required fields, it's hard to tell which field is required since the highlight only appears when a user interacts with a specific input field. Is it possible to allow the validators be seen at a glance?

Describe the solution you'd like
Is it possible to have all the required fields marked as shown below in the screenshot?

Describe alternatives you've considered
None

Additional context

[f-odhiambo]

This is related #544

[jingtang10]

can you please share the questionnaire? @Itskiprotich

thanks

[jingtang10]

@Itskiprotich The reason that we do not show all these validation errors is because we do not want to spam the user when they first open the questionnaire. We discussed this with @mberg @f-odhiambo @shelaghm. Showing all these validation errors at the same time when the user first open the questionnaire is considered as an unhelpful pattern.

Unless there's a differernt solution, I will just mark this as a duplicate issue as #544 as @f-odhiambo suggested.

EDIT: please feel free to reopen if you have additional comments or disagree.

[jingtang10]

@Itskiprotich can you confirm if you can use the submit button provided by the library (which uses the fragment results API)? rather than calling the getQuestionnaireResponse API?

Discussed with @aditya-07 and @shelaghm. It remains a question what the questionnaire behavior should be when there are either validation errors on the last page, or previous pages (in the case of random entry mode, you can navigate to the next page without having completed everything in the current page, so it's possible that when you're on the last page, there're still unanswered questions in previous pages). Should we have a pop-up dialog? an inline widget? a toast? or some kind of more flexible API for developers to provide feedback to the user however they like.

[shelaghm]

I think a pop-up dialog that is displayed when a user presses "submit" can work well here because we want to alert people take action and fix the issues. There should also be error messages already displayed in the form if they haven't completed required questions or there's validation errors.

Screenshot w/ example

What do you think of this approach @aditya-07 and @jingtang10?

[shelaghm]

Discussion with Jing:
What happens when you complete fields -> scroll back to the first incomplete question (single page) or first page for paginated
Should we also add a OK/Save anyways button? (use case is for saving a draft of a questionnaire)
V1 of this could be to only show an OK button here, and V2 could be to add complete fields button.

How to show the questionnaire has fields that are incomplete in the patient card?

[Itskiprotich]

Sorry for the delay.

Attached is the questionnaire I'm using.
baby-monitoring.zip

[jingtang10]

i think in the V1 we should have "complete fields" and "submit anyway" buttons in the dialog just because in some cases the healthworker might want to save a draft questionnaire

[jingtang10]

@shelaghm i think the text in the dialog needs to be more generic. "complete all required fields" doesn't cover the cases where validation is failing for other reasons, e.g., value too large/small, text too long/short etc.

[shelaghm]

@jingtang10 How about some of these options? Is incomplete questionnaire generic enough? I was thinking it could cover both the scenario of missing questions or that there are errors causing the questionnaire to be incomplete. Another option (3) is to describe all of it as "errors" without making a distinction of what kind of error it is. Thoughts?

[shelaghm]

Aligned on this direction with Jing. Fix the following questions

[jingtang10]

@shelaghm nit: let's use anyway instead of anyways since anyways is the informal version of anyway.

[shelaghm]

@jingtang10 sounds good, I'll make the change in my mocks
@aditya-07 please use "save anyway" when working on this issue