Add helpful validation messages

What does this MR do and why?

For #365934 (closed), #367222 (closed), #367220 (closed)

Added helpful validation messages for masked variables regarding the doc

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After
before	after

How to set up and validate locally

1. navigate to a project, and in the sidebar choose Settings => CI/CD
2. expand the variables settings section
3. click the Add variable button to open the variable drawer
4. toggle the Mask variable ("Mask this variable in job logs if it meets regular expression requirements.") checkbox:
   • the validation message "The value must have at least 8 characters." should appear below the variable value field if the value is not blank and shorter than 8 characters
   • the validation message "This value cannot be masked because it contains the following characters: whitespace characters." should appear below the variable value field if the value is not blank and not a single line
   • the validation message "This value cannot be masked because it contains the following characters: |." should appear below the variable value field if the value is not blank and contains unsupported characters (e.g. |)
   • the validation message "This value cannot be masked because it contains the following characters: !. The value must have at least 8 characters." should appear below the variable value field if the value is not blank, shorter than 8 characters, and contains unsupported characters (e.g. !)
   • the validation message "This value cannot be masked because it contains the following characters: whitespace characters. The value must have at least 8 characters." should appear below the variable value field if the value is not blank, shorter than 8 characters, and not a single line
   • the validation message "This value cannot be masked because it contains the following characters: ! and whitespace characters. The value must have at least 8 characters." should appear below the variable value field if the value is not blank, shorter than 8 characters, not a single line, and contain unsupported characters (e.g. !)
   • the validation message "This value cannot be masked because it contains the following characters: ! and whitespace characters." should appear below the variable value field if the value is not blank, not a single line, and contains unsupported characters (e.g. !)
   • the validation message "This value cannot be masked because it contains the following characters: |, !." should appear below the variable value field if the value is not blank, not a single line, and contain unsupported characters (e.g. | and !).
   • the validation message "This value cannot be masked because it contains the following characters: %, |, !." should appear below the variable value field if the value is not blank, not a single line, and contain unsupported characters (e.g. %, | and !).

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #365934 (closed), #367222 (closed), #367220 (closed)

#418331 (closed)