Improve the formValidate directive

We now just listen for changes to the form.$error object rather
than having the controller triggering an error event. This now supports
other changes such as external directives adding validations to
inputs also.

h/static/scripts/directives.coffee

-formValidate = ->
+formValidate = ['$timeout', ($timeout) ->
   link: (scope, elem, attr, form) ->
-    errorClassName = attr.formValidateErrorClass
+    isSubmitted = false
+    fieldClassName = 'form-field'
+    errorClassName = 'form-field-error'
 
     toggleClass = (field, {addClass}) ->
-      fieldEl = elem.find("[data-target=#{field.$name}]")
+      inputEl = elem.find("[name=#{field.$name}]")
+      fieldEl = inputEl.parents(".#{fieldClassName}").first()
       fieldEl.toggleClass(errorClassName, addClass)
 
     updateField = (field) ->
@@ -30,18 +33,23 @@ formValidate = ->
 
     # 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) ->
       forEachField(updateField)
 
-    # Validate when a response is processed.
-    scope.$on 'error', (event, name) ->
-      return unless form.$name == name
-      forEachField(updateField)
+    # Validate form on submit and set flag for error watcher.
+    elem.on 'submit', ->
+      isSubmitted = true
+      forEachField (field) ->
+        field.$setViewValue(field.$viewValue)
+        updateField(field)
+
+    scope.$watch form.$name + '.$error', ->
+      if isSubmitted
+        forEachField(updateField)
+        isSubmitted = false
+    , true
 
   require: 'form'
+]
 
 
 markdown = ['$filter', '$timeout', ($filter, $timeout) ->

tests/js/directives-test.coffee

@@ -37,8 +37,8 @@ describe 'h.directives', ->
       $scope.model = {username: ''}
 
       template = '''
-      <form form-validate data-form-validate-error-class="form-field-error" name="login" onsubmit="return false">
-        <div class="form-field" data-error-class="form-field-error" data-target="username">
+      <form form-validate name="login" onsubmit="return false">
+        <div class="form-field">
           <input type="text" class="" ng-model="model.username" name="username" required ng-minlength="3" />
         </div>
       </form>
@@ -82,8 +82,8 @@ describe 'h.directives', ->
       $element.triggerHandler('submit')
       assert.notInclude($field.prop('className'), 'form-field-error')
 
-    it 'should apply an error class to an invalid field on "error" event', ->
-      $scope.$emit('error', 'login')
+    it 'should apply an error class if the form recieves errors after a submit action', ->
+      $element.trigger('submit')
       $element.controller('form').username.$setValidity('response', false)
 
       $field = $element.find('.form-field')
@@ -103,24 +103,24 @@ describe 'h.directives', ->
 
       assert.notInclude($field.prop('className'), 'form-field-error')
 
-    it 'should reset the "response" error on change', ->
+    it 'should reset the "response" error when the view changes', ->
       $field = $element.find('.form-field')
       $input = $element.find('[name=username]')
       controller = $input.controller('ngModel')
       controller.$setViewValue('abc')
 
       # Submit Event
+      $element.triggerHandler('submit')
       controller.$setValidity('response', false)
       controller.responseErrorMessage = 'fail'
-      $scope.$emit('error', $input.controller('form').$name)
-      assert.include($field.prop('className'), 'form-field-error')
+      $scope.$digest()
+
+      assert.include($field.prop('className'), 'form-field-error', 'Fail fast check')
 
       controller.$setViewValue('abc')
-      $scope.$digest()
 
       assert.notInclude($field.prop('className'), 'form-field-error')
 
-
   describe '.username', ->
     $element = null