Show required field text and red outline after user attempt

[jona42-ui]

Description
Some form fields show a red asterisk, red text, and red outline, this is good to communicate the required nature of those fields.
However, if the entire input is filled with red outlines or text(even before the user attempts anything), it causes negativity and stress. The red asterisk is arguably enough for accessibility and color association. The red text and online can appear on a wrong attempt

current look;

proposed look;

To take a look at current look:
https://openelis28.openelis-global.org/SamplePatientEntry

[ashuthe1]

Hi, @jona42-ui please assign it to me.
I would love to get started on this project by solving this issue.

[mozzy11]

@ashuthe1 i assigned you the issue

[mozzy11]

@ashuthe1 any progress ?

[gitcliff]

hello @mozzy11 ,,, you can assign me this one

[mozzy11]

Thanks @gitcliff

[gitcliff]

hello @mozzy11 PR #1267