Feature/56787 realtime validation for user fullname and username

What does this MR do?

Create a custom and generic validator to prevent emojis for specific inputs like username and user's full name.

@wortschi here is my class, As you see above, I have a small UX problem in my implementation, I manipulate input validation attributes by setting validity and validation message myself then display validation error whenever the element is invalid. It means I convert the elements to have 100% real-time validation 🙄 which is inconsistent and confusing since this is not the default behavior in our forms.

I tried to avoid that by defining a class attribute hasEmoji and show error message only if it's true but that causes a weird behavior which username already has because of its custom validator username_validator.js.

For some reason, after triggering a custom validator error then clicking on Register button, the default validation message This field is required. won't be displayed, and in username case even the success message Username is available and the custom validation message Username is already taken. won't be displayed.

Do you have any suggestions? or should I change my path?

What are the relevant issue numbers?

#56787 (closed)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated via this MR
• Documentation reviewed by technical writer or follow-up review issue created
• Tests added for this feature/bug
• Tested in all supported browsers
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides
• Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process.
• Security reports checked/validated by reviewer