Required fields validation

app/assets/javascripts/admin/customers/directives/edit_address_dialog.js.coffee

@@ -2,16 +2,21 @@ angular.module("admin.customers").directive 'editAddressDialog', ($compile, $tem
   restrict: 'A'
   scope: true
   link: (scope, element, attr) ->
+    scope.errors = []
+
     scope.$watch 'address.country_id', (newVal) ->
       if newVal
         scope.states = scope.filter_states(newVal)
 
     scope.updateAddress = ->
       scope.edit_address_form.$setPristine()
+      if scope.edit_address_form.$valid
+        Customers.update(scope.address, scope.customer, scope.current_address).$promise.then (data) ->
+          scope.customer = data
+          template.dialog('close')
+      else
+        scope.errors.push("Sorry! Please input all of the required fields!")
 
-      Customers.update(scope.address, scope.customer, scope.current_address).$promise.then (data) ->
-        scope.customer = data
-        template.dialog('close')
 
     template = $compile($templateCache.get('admin/edit_address_dialog.html'))(scope)
     template.dialog(DialogDefaults)

app/assets/javascripts/templates/admin/edit_address_dialog.html.haml

@@ -5,6 +5,8 @@
       Required fields are denoted with an asterisk (
       %span.required *
       )
+    .error{ ng: { repeat: "error in errors", bind: "error" } }
+
     %table.no-borders
       %tr
         %td
@@ -14,33 +16,38 @@
           %input{ type: 'text', name: 'address1', required: true, ng: { model: 'address.address1'} }
       %tr
         %td
-          Address2:
+          Address2
         %td
           %input{ type: 'text', name: 'address2', ng: { model: 'address.address2'} }
       %tr
         %td
-          Phone:
+          Phone
+          %span.required *
         %td
           %input{ type: 'text', name: 'phone', required: true, ng: { model: 'address.phone'} }
       %tr
         %td
-          City:
+          City
+          %span.required *
         %td
           %input{ type: 'text', name: 'city', required: true, ng: { model: 'address.city'} }
       %tr
         %td
-          Zipcode:
+          Zipcode
+          %span.required *
         %td
           %input{ type: 'text', name: 'zipcode', required: true, ng: { model: 'address.zipcode'} }
       %tr
         %td
-          Country:
+          Country
+          %span.required *
         %td
           %select{name: 'country', required: true, ng: {model: 'address.country_id', options: 'country.id as country.name for country in availableCountries'}}
             %option{value: ''} Select Country
       %tr
         %td
-          State:
+          State
+          %span.required *
         %td
           %select{name: 'state', required: true, ng: {model: 'address.state_id', options: 'state.id as state.name for state in states'}}
             %option{value: ''} Select State