Clean up registration/login validation errors.

r2/r2/public/static/css/reddit.less

@@ -2701,6 +2701,16 @@ li.searchfacet {
 }
 
 .user-form .error {
+    display: inline-block;
+    margin-top: 2px;
+    line-height: 16px;
+    color: inherit;
+    font-size: inherit;
+}
+
+/* Form-level errors. */
+.user-form .error.field-ratelimit,
+.user-form .error.field-vdelay {
     display: block;
 }
 
@@ -2726,6 +2736,7 @@ li.searchfacet {
     border: 1px solid #A0A0A0;
     margin-top: 2px; 
     margin-bottom: 2px; 
+    margin-right: 10px;
     padding: 1px;
 }
 
@@ -2750,7 +2761,7 @@ li.searchfacet {
 }
 
 .register-form.name-taken .notice-taken, .register-form.name-available .notice-available {
-    display: block;
+    display: inline-block;
     margin-top: 2px;
 }
 
@@ -2760,12 +2771,10 @@ li.searchfacet {
 }
 
 .register-form.name-checking {
-    .notice-taken, .notice-available {
-        opacity: .5;
-    }
-
     .name-entry .throbber {
         display: inline-block;
+        margin-left: -1px;
+        margin-top: 2px;
     }
 }
 
@@ -6112,7 +6121,8 @@ dd { margin-left: 20px;  }
 .users-online:before,
 .notice-taken:before,
 .notice-available:before,
-.info-notice:before {
+.info-notice:before,
+.user-form .error:before {
     height: 16px;
     width: 16px;
     display: block;
@@ -6199,7 +6209,8 @@ dd { margin-left: 20px;  }
     margin-right: 3px;
 }
 
-.notice-taken:before {
+.notice-taken:before,
+.user-form .error:before {
     background-image: url(../icon-circle-exclamation.png);  /* SPRITE */
 }
 

r2/r2/public/static/js/login.js

@@ -209,6 +209,7 @@ r.ui.RegisterForm = function() {
     this.$submit = this.$el.find('.submit button')
 }
 r.ui.RegisterForm.prototype = $.extend(new r.ui.Form(), {
+    maxName: 0,
     usernameChanged: function() {
         var name = this.$user.val()
         if (name == this._priorName) {
@@ -218,12 +219,20 @@ r.ui.RegisterForm.prototype = $.extend(new r.ui.Form(), {
         }
 
         this.$el.find('.error.field-user').hide()
+        this.$el.removeClass('name-checking name-available name-taken')
+
+        this.maxName = Math.max(this.maxName, name.length)
+        if (name && this.maxName >= 3) {
+            this.$el.addClass('name-checking')
+            this.checkUsernameDebounced()
+        }
+
         this.$submit.attr('disabled', false)
-        this.checkUsernameDebounced(name)
-        this.$el.toggleClass('name-checking', !!name)
     },
 
-    checkUsername: function(name) {
+    checkUsername: function() {
+        var name = this.$user.val()
+
         if (name) {
             $.ajax({
                 url: '/api/username_available.json',
@@ -241,9 +250,7 @@ r.ui.RegisterForm.prototype = $.extend(new r.ui.Form(), {
             this.showErrors(result.json.errors)
             this.$submit.attr('disabled', true)
         } else {
-            this.$el
-                .removeClass('name-available name-taken')
-                .addClass(result ? 'name-available' : 'name-taken')
+            this.$el.addClass(result ? 'name-available' : 'name-taken')
             this.$submit.attr('disabled', result == false)
         }
     },

r2/r2/templates/login.html

@@ -111,8 +111,6 @@
           <% iden = hasattr(thing, "captcha") and thing.captcha.iden or '' %>
           ${captchagen(iden, tabulate=True, label=False, size=30, tabindex=tabindex)}
           %endif
-          ${error_field("RATELIMIT", "ratelimit")}
-          ${error_field("RATELIMIT", "vdelay")}
         </li>
       %endif
       <li>
@@ -135,6 +133,10 @@
         </button>
         <span class="throbber"></span>
         <span class="status"></span>
+        %if register:
+          ${error_field("RATELIMIT", "ratelimit")}
+          ${error_field("RATELIMIT", "vdelay")}
+        %endif
       </p>
     </div>
   </form>