Special characters cause regex error when creating components

Overview

When trying to create a component with an apostrophe or special characters in its name, the system displayed an error:

{
    "status": 422,
    "data": {
        "errors": [
            {
                "detail": "[id] Does not match the regex pattern ^[a-z]([a-zA-Z0-9_-]*[a-zA-Z0-9])*:[a-z]([a-zA-Z0-9_-]*[a-zA-Z0-9])*$/n[machineName] Does not match the regex pattern ^[a-z]([a-zA-Z0-9_-]*[a-zA-Z0-9])*$",
                "source": {
                    "pointer": ""
                }
            },
            {
                "detail": "The <em class=\"placeholder\">&quot;who&#039;s_live&quot;</em> machine name is not valid.",
                "source": {
                    "pointer": "machineName"
                }
            }
        ]
    }
}

Proposed resolution

User interface changes