Add some form validation for sites

dropbox · Jan 4, 2015 · d63ecd7 · d63ecd7
1 parent 18dba7c
commit d63ecd7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/nsot/static/templates/site.html b/nsot/static/templates/site.html
@@ -18,19 +18,25 @@
             <div ng-if="updateError" class="alert alert-danger">
                 [[updateError.code]] - [[updateError.message]]
             </div>
-            <form novalidate class="nsot-form">
-                <div class="form-group">
+            <form novalidate name="siteForm" class="nsot-form">
+                <div class="form-group" ng-class="{
+                    'has-error' : siteForm.name.$invalid,
+                    'has-success' : siteForm.name.$valid,
+                }">
                     <input type="text"
-                           class="form-control"i
-                           placeholder="Name"
+                           class="form-control"
+                           name="name"
+                           placeholder="Name (required)"
                            ng-model="site.name"
+                           ng-minlength="1"
                            required
                     >
                 </div>
                 <div class="form-group">
                     <textarea style="resize: vertical;"
                               class="form-control"
                               rows="5"
+                              name="description"
                               placeholder="Description"
                               ng-model="site.description"
                     >
@@ -42,7 +48,9 @@
             <button type="button" class="btn btn-default" data-dismiss="modal">
                 Close
             </button>
-            <button type="submit" ng-click="updateSite(site)" class="btn btn-primary">
+            <button type="submit" ng-click="updateSite(site)"
+                    class="btn btn-primary" ng-disabled="siteForm.$invalid"
+            >
                 Update
             </button>
         </div>

diff --git a/nsot/static/templates/sites.html b/nsot/static/templates/sites.html
@@ -13,19 +13,25 @@
             <div ng-if="error" class="alert alert-danger">
                 [[error.code]] - [[error.message]]
             </div>
-            <form novalidate class="nsot-form">
-                <div class="form-group">
+            <form novalidate name="siteForm" class="nsot-form">
+                <div class="form-group" ng-class="{
+                    'has-error' : siteForm.name.$invalid,
+                    'has-success' : siteForm.name.$valid,
+                }">
                     <input type="text"
-                           class="form-control"i
-                           placeholder="Name"
+                           class="form-control"
+                           name="name"
+                           placeholder="Name (required)"
                            ng-model="site.name"
+                           ng-minlength="1"
                            required
                     >
                 </div>
                 <div class="form-group">
                     <textarea style="resize: vertical;"
                               class="form-control"
                               rows="5"
+                              name="description"
                               placeholder="Description"
                               ng-model="site.description"
                     >
@@ -37,11 +43,13 @@
             <button type="button" class="btn btn-default" data-dismiss="modal">
                 Close
             </button>
-            <button type="submit" ng-click="createSite(site)" class="btn btn-primary">
+            <button type="submit" ng-click="createSite(site)"
+                    class="btn btn-primary" ng-disabled="siteForm.$invalid"
+            >
                 Create
             </button>
         </div>
-    </div>
+    </nsot-modal>
 
     <div ng-if="!sites.length" class="row"><div class="col-sm-6 col-sm-offset-3">
         <panel>