More improvements to the form validation

 * Validate on "change" rather than submit. This prevents errors
   appearing when the user tabs in/out of an input.
 * Keypress updating of errors in place errors to immediately indicate
   to the user when they have fixed an error.

h/static/scripts/directives.coffee

-formErrorList = ->
+formField = ->
   link: (scope, elem, attr, form) ->
     field = form[attr.target]
     return unless field?
 
-    field.$setUntouched = ->
-      field.$untouched = true
-      field.$touched = false
-      elem.parent().children('input').removeClass('ng-touched')
+    field.unsetFieldError = ->
+      elem.removeClass('form-field-error')
+
+    field.setFieldError = ->
+      elem.addClass('form-field-error')
 
-    field.$setTouched = ->
-      field.$untouched = false
-      field.$touched = true
-      elem.parent().children('input').addClass('ng-touched')
   require: '^form'
   restrict: 'C'
 
 
 formValidate = ->
   link: (scope, elem, attr, form) ->
-    elem.on 'blur', ':input', ->
-      form[this.name]?.$setTouched()
+    updateField = (field) ->
+      return unless field?
+
+      if field.$valid
+        field.unsetFieldError()
+      else
+        field.setFieldError()
 
+    # Immediately show feedback for corrections.
+    elem.on 'keyup', ':input', ->
+      updateField(form[this.name]) if form[this.name]?.$valid
+
+    # Validate field when the content changes.
+    elem.on 'change', ':input', ->
+      updateField(form[this.name])
+
+    # Validate the field when submit is clicked.
     elem.on 'submit', (event) ->
-      for fieldName of form
-        form[fieldName]?.$setTouched?()
+      updateField(field) for _, field of form
+
   require: 'form'
 
 
@@ -444,7 +455,7 @@ whenscrolled = ['$window', ($window) ->
 
 
 angular.module('h.directives', ['ngSanitize'])
-.directive('formErrorList', formErrorList)
+.directive('formField', formField)
 .directive('formValidate', formValidate)
 .directive('fuzzytime', fuzzytime)
 .directive('markdown', markdown)

h/static/styles/forms.scss

@@ -18,8 +18,14 @@
   }
 }
 
-.form-field-error .form-input {
-  @extend %form-input-error-state;
+.form-field-error {
+  .form-input {
+    @extend %form-input-error-state;
+  }
+
+  .form-error-list {
+    display: block;
+  }
 }
 
 .form-input,
@@ -71,15 +77,6 @@
       color: #cbbb95;
     }
   }
-
-  // This is not ideal
-  &.ng-dirty.ng-invalid {
-    @extend %form-input-error-state;
-
-    &.ng-touched ~ .form-error-list {
-      display: block;
-    }
-  }
 }
 
 .form-select {