Merge pull request #367 from appirio-tech/feature/tom-address/validation

updated address validation

Author: tladendo

app/settings/account-info/account-info.jade

@@ -95,9 +95,13 @@
             placeholder="123 Topcoder Ave.",
             value="{{vm.homeAddress.streetAddr1}}",
             ng-model="vm.homeAddress.streetAddr1",
-            ng-class="{'form-field-focused': hasFocus==true}"
+            ng-class="{'form-field-focused': hasFocus==true}",
+            ng-required="vm.addressDirty = vm.accountInfoForm.address.$dirty || vm.accountInfoForm.city.$dirty || vm.accountInfoForm.state.$dirty || vm.accountInfoForm.zipcode.$dirty || vm.accountInfoForm.country.$dirty"
           )
 
+          .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.address.$invalid")
+            p(ng-show="vm.accountInfoForm.address.$error.required") Please enter an address
+
           .form-label Address 2
             span(style="text-transform: none;")  (opt., suite, etc.)
           input.form-field(
@@ -115,27 +119,39 @@
             value="{{vm.homeAddress.city}}",
             placeholder="Best City in the World",
             ng-model="vm.homeAddress.city",
-            ng-class="{'form-field-focused': hasFocus==true}"
+            ng-class="{'form-field-focused': hasFocus==true}",
+            ng-required="vm.addressDirty"
           )
 
+          .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.city.$invalid")
+            p(ng-show="vm.accountInfoForm.city.$error.required") Please enter a city
+
           .form-label State/Province
           input.form-field(
             name="state", type="text",
             value="{{vm.homeAddress.stateCode}}",
             placeholder="California",
             ng-model="vm.homeAddress.stateCode",
-            ng-class="{'form-field-focused': hasFocus==true}"
+            ng-class="{'form-field-focused': hasFocus==true}",
+            ng-required="vm.addressDirty"
           )
 
+          .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.state.$invalid")
+            p(ng-show="vm.accountInfoForm.state.$error.required") Please enter a state or province
+
           .form-label Zip
           input.form-field(
             name="zipcode", type="text",
             placeholder="Zip"
             value="{{vm.homeAddress.zip}}",
             ng-model="vm.homeAddress.zip",
-            ng-class="{'form-field-focused': hasFocus==true}"
+            ng-class="{'form-field-focused': hasFocus==true}",
+            ng-required="vm.addressDirty"
           )
 
+          .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.zipcode.$invalid")
+            p(ng-show="vm.accountInfoForm.zipcode.$error.required") Please enter a zip
+
           .form-label Country
           angucomplete-alt(
             input-name="country",
@@ -148,9 +164,10 @@
             title-field="name",
             match-class="angucomplete-highlight",
             minlength="1",
-            ng-class="{'form-field-focused': hasFocus==true}"
+            ng-class="{'form-field-focused': hasFocus==true}",
+            field-required="vm.addressDirty"
           )
-          .account-info-error(ng-show="vm.accountInfoForm.country.$invalid")
+          .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.country.$error.required")
             p(ng-show="vm.accountInfoForm.country.$error.required") Please choose a country from the list.
 
 

assets/css/settings/account-info.scss

@@ -4,6 +4,10 @@
 .account-info-container {
   padding-bottom: 75px;
 
+  .account-info-error {
+    color: #ef3a3a;
+  }
+
   .section-fields {
     margin-top: 20px;
   }