diff --git a/src/auth/oauthClient.js b/src/auth/oauthClient.js
index 1180a72..a6426be 100644
--- a/src/auth/oauthClient.js
+++ b/src/auth/oauthClient.js
@@ -356,6 +356,8 @@ function interpolateUsernameTemplate (client, ssoData) {
     .replace(/\{(\w+)\}/g, (_, key) => ssoData[key] ?? '')
     // strip any characters not allowed in username
     .replace(/[^A-Za-z0-9-]/g, '')
+    // limit to max username length
+    .substring(0, 32)
   console.log(
     'Generated username from template %s and data %j: %s',
     client.usernameTemplate,
diff --git a/views/components/HandleInput.js b/views/components/HandleInput.js
index 016f9a8..d33f691 100644
--- a/views/components/HandleInput.js
+++ b/views/components/HandleInput.js
@@ -26,7 +26,7 @@ export default class HandleInput extends React.Component {
             id='username'
             type='text' inputMode='email' name='username'
             placeholder='username'
-            required pattern='^[A-Za-z0-9-]{3,32}$'
+            required pattern='[A-Za-z0-9\-]{3,32}'
             autoCapitalize='off' autoCorrect='off' spellCheck='false'
             title='Letters, numbers, & dashes only, between 3 and 32 characters'
             value={this.state.username}
diff --git a/views/oidc-interstitial/oidc-interstitial.js b/views/oidc-interstitial/oidc-interstitial.js
index 4f45ee5..a634465 100644
--- a/views/oidc-interstitial/oidc-interstitial.js
+++ b/views/oidc-interstitial/oidc-interstitial.js
@@ -91,7 +91,7 @@ function RegisterForm ({ domain, fetching, setFetching }) {
   }, [setFetching, setTakenMessage, setRegistrationError, setRegistrationSuccess])
   useEffect(() => {
     // auto-submit form when page loads if username prefilled
-    if (proposedUsername) {
+    if (proposedUsername && formEl.current.reportValidity()) {
       formEl.current.dispatchEvent(
         new Event('submit', { bubbles: true, cancelable: true })
       )