diff --git a/webadmin/src/views/tokens.html b/webadmin/src/views/tokens.html
index 041705015..53587e1af 100644
--- a/webadmin/src/views/tokens.html
+++ b/webadmin/src/views/tokens.html
@@ -14,7 +14,7 @@
                             <small ng-show="clientAddForm.name.$error.required">A name is required</small>
                             <small ng-show="!clientAddForm.name.$dirty && clientAdd.error.name">{{ clientAdd.error.name }}</small>
                         </div>
-                        <input type="text" class="form-control" ng-model="clientAdd.name" name="name" required autofocus>
+                        <input type="text" class="form-control" ng-model="clientAdd.name" name="name" id="clientAddName" required autofocus>
                     </div>
                     <div class="form-group" ng-class="{ 'has-error': (clientAddForm.scope.$dirty && clientAddForm.scope.$invalid) || (!clientAddForm.scope.$dirty && clientAdd.error.scope) }">
                         <label class="control-label">Scope</label>
diff --git a/webadmin/src/views/tokens.js b/webadmin/src/views/tokens.js
index 1d29db9be..a24822b73 100644
--- a/webadmin/src/views/tokens.js
+++ b/webadmin/src/views/tokens.js
@@ -43,6 +43,10 @@ angular.module('Application').controller('TokensController', ['$scope', 'Client'
                         $scope.clientAdd.error.redirectURI = error.message;
                         $scope.clientAddForm.redirectURI.$setPristine();
                         $('#clientAddRedirectURI').focus();
+                    } else if (error.message.indexOf('Username can only contain alphanumerals and dash') === 0) {
+                        $scope.clientAdd.error.name = error.message;
+                        $scope.clientAddForm.name.$setPristine();
+                        $('#clientAddName').focus();
                     } else if (error.message.indexOf('Invalid scope') === 0) {
                         $scope.clientAdd.error.scope = error.message;
                         $scope.clientAddForm.scope.$setPristine();