Device Alias form has 3 validation factors:

src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts

@@ -1,5 +1,9 @@
 import { html, render } from "lit-html";
 import { initLogout, logoutSection } from "../../../components/logout";
+// Regex Pattern for input: All characters, including starting(^) single character or more(+),
+// must be alphabet, number or underscore. Can have hyphen(s) or space(s) in the middle.
+// Good examples: "2019_macbook", "2019-Macbook", "_2019 Macbook"
+// Bad examples: "2019 macbook!", " 2010: macbook", "space trails at end "
 
 const pageContent = () => html`
   <div class="container">
@@ -13,6 +17,9 @@ const pageContent = () => html`
         placeholder="Device alias"
         type="text"
         required
+        maxlength="30"
+        pattern="^[A-Za-z0-9_]+((-|\\s)*[A-Za-z0-9_])*$"
+        spellcheck="false"
       />
       <button type="submit" id="deviceAliasContinue" class="primary">
         Add Device
@@ -51,4 +58,30 @@ const init = (): Promise<string | null> =>
       event.preventDefault();
       resolve(deviceAlias.value);
     };
+    const deviceInput = document.getElementById(
+      "deviceAlias"
+    ) as HTMLInputElement;
+
+    deviceInput.addEventListener("invalid", () => {
+      let message = "";
+      if (deviceInput.validity.valueMissing) {
+        message = "Please fill out this field.";
+      } else if (deviceInput.validity.patternMismatch) {
+        if (deviceInput.value.startsWith(" ")) {
+          message = "Name can't start with a space.";
+        } else if (
+          deviceInput.value.endsWith(" ") ||
+          deviceInput.value.endsWith("-")
+        ) {
+          message = "Name can't end with a space or hyphen.";
+        } else {
+          message = "Name can't contain special characters.";
+        }
+      }
+      deviceInput.setCustomValidity(message);
+    });
+    deviceInput.addEventListener("input", () => {
+      deviceInput.setCustomValidity("");
+      deviceInput.reportValidity();
+    });
   });

src/frontend/src/flows/register.ts

@@ -20,7 +20,16 @@ const pageContent = html`
     <h1>Create a new Internet Identity Anchor</h1>
     <form id="registerForm">
       <p>Please provide a name for your device.</p>
-      <input id="registerAlias" placeholder="Device name" />
+      <input
+        id="registerAlias"
+        placeholder="Device name"
+        aria-label="device name"
+        type="text"
+        required
+        maxlength="30"
+        pattern="^[A-Za-z0-9_]+((-|\\s)*[A-Za-z0-9_])*$"
+        spellcheck="false"
+      />
       <button type="submit" class="primary">Create</button>
       <button id="registerCancel" type="button">Cancel</button>
     </form>
@@ -101,6 +110,35 @@ const init = (connection: Connection): Promise<LoginFlowResult | null> =>
         reject(err);
       }
     };
+
+    const registerAlias = document.getElementById(
+      "registerAlias"
+    ) as HTMLInputElement;
+
+    registerAlias.addEventListener("invalid", () => {
+      if (registerAlias.validity.valueMissing) {
+        registerAlias.setCustomValidity("Please fill out this field.");
+      } else if (registerAlias.validity.patternMismatch) {
+        if (registerAlias.value.startsWith(" ")) {
+          registerAlias.setCustomValidity("Name can't start with a space.");
+        } else if (
+          registerAlias.value.endsWith(" ") ||
+          registerAlias.value.endsWith("-")
+        ) {
+          registerAlias.setCustomValidity(
+            "Name can't end with a space or hyphen."
+          );
+        } else {
+          registerAlias.setCustomValidity(
+            "Name can't contain special characters."
+          );
+        }
+      }
+    });
+    registerAlias.addEventListener("input", () => {
+      registerAlias.setCustomValidity("");
+      registerAlias.reportValidity();
+    });
   });
 
 const tick = (): Promise<void> => new Promise((resolve) => nextTick(resolve));