Validation status - should it disappear or turn green?

Question

We have client-side validation when users fill out a form. See below:

The question here is: if the user answers the question, should the "!" button disappear? This button also serves as toggling on/off the error on the input.

My idea was to have it go green with a check once data is validated. This would mean that if a question is NOT required, then it should be green and checked(?). Additionally, there is a "reviewer" persona where this particular user is not filling out the form but just viewing the form to see what the user entered. In this case, it is assumed that these validation buttons should be hidden.

Another thing to notice is that the "?" is disabled when help-text is not applied to the question. Should the same pattern apply to the data validation if the question is NOT required (where the validation button is disabled?).

Would appreciate anything else you guys can point out that doesn't make sense. Thank you all.

EDIT: here is what the form input looks like when you toggle ON the form validation error:

EDIT AGAIN: here is how it looks based on all the information you guys have provided me. In the labels I have added what each one means.

Answer 1

Hidden messages

Your design hides messages that the user needs to complete their task - helper text and error text. The user needs immediate access to helper text to ensure that they complete each field correctly on their first try. They also need immediate access to the error text so they can correct invalid inputs.

I don't see the usefulness of having these messages hidden by default. Forcing the user to click a button to reveal error messages is a needless source of friction. I can't imagine a scenario in which the user would find it profitable to explicitly hide these messages themselves.

The error toggle button is not a standard convention so the user will be less likely to click it. Additionally, it does not look like a button and the label ! does not communicate its functionality.

Successful validation notification

While this is commonly used for login flows, I don't see this in use for general form inputs. As Pushkar has already pointed out just skip to the next field when validation is successful. These micro-validations are of interest to your backend system but they are not that important to the user. Signalling that each field is validated when the user just wants to submit the form is unnecessary in my opinion. Additionally, validation and errors should only show after the user has provided an input.

Disabled controls

Disabling the helper text icon indicates that the function is unavailable when you are really attempting to indicate the absence of this functionality. If helper text is unavailable for a field I would remove the icon. Similarly, if you don't perform data validation on a field then no validation controls should be given.

Conclusion

1. The error message should be immediately visible after an error has been found. The error button ! should be converted to an icon since the message toggling functionality should not be needed. It serves your accessibility requirements so there is no need to remove the icon.
2. Consider showing the helper text below the question by default. This way the helper text will always be visible to the user while they complete the field. Also, remove the helper button/icon ? as it would only add visual noise to the form if the helper text is already immediately visible.
3. Validation icons can be removed or at most shown temporarily when an error has been resolved. If kept, validation icons should only be shown in response to a validation performed. Questions that have not been answered should not have a validation icon.

Suggested design before form input and validation. Helper text below field title is immediately visible, there are no validation icons and optional and required fields distinguished only by *.

Suggested design after validation performed with error message and helper text immediately visible.

Answer 2

Why not entirely skip the 'green and checked' for the fields that are optional? That way the user focuses more on the fields that are required.

The ! should turn to green and checked once the data is found to be valid. Else, it just toggles the error when the user moves to the next field.

Answer 3

I don't think it is a "right way" to do this animation. It can be something less visible, with a smooth transition or something with a great effect.

If it is a form, something formal, the main goal will be to make the process faster and not to draw attention on the animation. The steps can be: red + "!" --> green + "!" --> green + "✓".

If the goal is to entertain the user, this can be more funny or visible, like https://codepen.io/dcarock/pen/OPqGrM or https://site.uplabs.com/posts/form-validation-interaction.