From 1d93d5c6873c4791ec9225e887a774a9d612fab5 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 11 Apr 2017 12:27:03 -0400
Subject: [PATCH] show errors on payment form page

---
 src/app/directives/apiFormDirective.js        |  1 +
 .../views/settingsCreateOrganization.html     | 35 ++++++++++---------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/app/directives/apiFormDirective.js b/src/app/directives/apiFormDirective.js
index f240ab53c2c..ea2790c0c60 100644
--- a/src/app/directives/apiFormDirective.js
+++ b/src/app/directives/apiFormDirective.js
@@ -30,6 +30,7 @@ angular
                 form.$loading = false;
                 validationService.addErrors(form, reason);
                 scope.$broadcast('show-errors-check-validity');
+                $('html, body').animate({ scrollTop: 0 }, 200);
             });
         }
     });
\ No newline at end of file
diff --git a/src/app/settings/views/settingsCreateOrganization.html b/src/app/settings/views/settingsCreateOrganization.html
index c85a6b9ccb3..238c43cef31 100644
--- a/src/app/settings/views/settingsCreateOrganization.html
+++ b/src/app/settings/views/settingsCreateOrganization.html
@@ -1,4 +1,4 @@
-`<section class="content-header">
+<section class="content-header">
     <h1>Create Organization</h1>
 </section>
 <section class="content">
@@ -122,7 +122,7 @@
                         <div class="form-group" show-errors style="margin: 0;">
                             <label for="additionalSeats" class="sr-only">Additional Users</label>
                             <input type="number" id="additionalSeats" name="AdditionalSeats" ng-model="model.additionalSeats"
-                                   min="0" ng- class="form-control" placeholder="# of users" api-field
+                                   min="0" class="form-control" placeholder="# of users" api-field
                                    ng-attr-max="{{plans[model.plan].maxAdditionalSeats || 1000000}}" />
                         </div>
                     </div>
@@ -178,10 +178,10 @@
             <div class="box-body">
                 <div class="row">
                     <div class="col-md-5">
-                        <div class="form-group">
+                        <div class="form-group" show-errors>
                             <label for="card_number">Card Number</label>
-                            <input type="text" id="card_number" name="card_number" ng-model="model.card.number" class="form-control"
-                                   cc-number cc-eager-type required />
+                            <input type="text" id="card_number" name="card_number" ng-model="model.card.number"
+                                   class="form-control" cc-number cc-eager-type required api-field />
                         </div>
                     </div>
                     <div class="col-md-7">
@@ -198,9 +198,10 @@
                 </div>
                 <div class="row">
                     <div class="col-sm-4">
-                        <div class="form-group">
+                        <div class="form-group" show-errors>
                             <label for="exp_month">Expiration Month</label>
-                            <select id="exp_month" class="form-control" ng-model="model.card.exp_month" required cc-exp-month>
+                            <select id="exp_month" class="form-control" ng-model="model.card.exp_month" required cc-exp-month
+                                    name="exp_month" api-field>
                                 <option value="">-- Select --</option>
                                 <option value="01">01 - January</option>
                                 <option value="02">02 - February</option>
@@ -218,9 +219,10 @@
                         </div>
                     </div>
                     <div class="col-sm-4">
-                        <div class="form-group">
+                        <div class="form-group" show-errors>
                             <label for="exp_year">Expiration Year</label>
-                            <select id="exp_year" class="form-control" ng-model="model.card.exp_year" required cc-exp-year>
+                            <select id="exp_year" class="form-control" ng-model="model.card.exp_year" required cc-exp-year
+                                    name="exp_year" api-field>
                                 <option value="">-- Select --</option>
                                 <option value="17">2017</option>
                                 <option value="18">2018</option>
@@ -234,18 +236,19 @@
                         </div>
                     </div>
                     <div class="col-sm-4">
-                        <div class="form-group">
+                        <div class="form-group" show-errors>
                             <label for="cvc">CVC <i class="fa fa-question-circle"></i></label>
-                            <input type="text" id="cvc" ng-model="model.card.cvc" class="form-control"
-                                   cc-type="number.$ccType" cc-cvc required />
+                            <input type="text" id="cvc" ng-model="model.card.cvc" class="form-control" name="cvc"
+                                   cc-type="number.$ccType" cc-cvc required api-field />
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-sm-6">
-                        <div class="form-group">
+                        <div class="form-group" show-errors>
                             <label for="address_country">Country</label>
-                            <select id="address_country" class="form-control" ng-model="model.card.address_country" required>
+                            <select id="address_country" class="form-control" ng-model="model.card.address_country"
+                                    required name="address_country" api-field>
                                 <option value="">-- Select --</option>
                                 <option value="US">United States</option>
                                 <option value="CN">China</option>
@@ -501,11 +504,11 @@
                         </div>
                     </div>
                     <div class="col-sm-4">
-                        <div class="form-group">
+                        <div class="form-group" show-errors>
                             <label for="address_zip"
                                    ng-bind="model.card.address_country === 'US' ? 'Zip Code' : 'Postal Code'"></label>
                             <input type="text" id="address_zip" ng-model="model.card.address_zip"
-                                   class="form-control" required />
+                                   class="form-control" required name="address_zip" api-field />
                         </div>
                     </div>
                 </div>