validate the details screen before progressing

4 files changed, 55 insertions, 3 deletions

diff --git a/www/index.html b/www/index.html
index d50851d..c69f571 100644
--- a/www/index.html
+++ b/www/index.html
@@ -32,6 +32,7 @@
         <script type="text/javascript" src="js/map-bing-ol.js"></script>
 
         <script type="text/javascript" src="js/locate.js"></script>
+        <script type="text/javascript" src="js/strings.js"></script>
 
         <script type="text/javascript" src="js/views/fms.js"></script>
         <script type="text/javascript" src="js/views/home.js"></script>
diff --git a/www/js/views/details.js b/www/js/views/details.js
index 2647624..1b2eb6d 100644
--- a/www/js/views/details.js
+++ b/www/js/views/details.js
@@ -4,7 +4,43 @@
             template: 'details',
             id: 'details-page',
             prev: 'photo',
-            next: 'submit'
+            next: 'submit',
+
+            onClickButtonPrev: function() {
+                this.model.set('title', $('#form_title').val());
+                this.model.set('details', $('#form_detail').val());
+                this.model.set('category', $('#form_category').val());
+                this.navigate( this.prev );
+            },
+
+            onClickButtonNext: function() {
+                this.clearValidationErrors();
+                var valid = 1;
+
+                if ( !$('#form_title').val() ) {
+                    valid = 0;
+                    this.validationError( 'form_title', FMS.validationStrings.title );
+                }
+
+                if ( !$('#form_detail').val() ) {
+                    valid = 0;
+                    this.validationError( 'form_detail', FMS.validationStrings.detail );
+                }
+
+                var cat = $('#form_category').val();
+                if ( cat == '-- Pick a category --' ) {
+                    valid = 0;
+                    this.validationError( 'form_category', FMS.validationStrings.category );
+                }
+
+                if ( valid ) {
+                    this.clearValidationErrors();
+                    this.model.set('title', $('#form_title').val());
+                    this.model.set('detail', $('#form_detail').val());
+                    this.model.set('category', $('#form_category').val());
+                    this.navigate( this.next );
+                }
+            }
         })
     });
 })(FMS, Backbone, _, $);
diff --git a/www/js/views/fms.js b/www/js/views/fms.js
index 77961d3..379cd6b 100644
--- a/www/js/views/fms.js
+++ b/www/js/views/fms.js
@@ -49,6 +49,21 @@
                 alert(msg);
             },
 
+            validationError: function( id, error ) {
+                var el_id = '#' + id;
+                var el = $(el_id);
+                var err = '<div for="' + id + '" class="form-error">' + error + '</div>';
+                if ( $('div[for='+id+']').length === 0 ) {
+                    el.before(err);
+                    el.addClass('form-error');
+                }
+            },
+
+            clearValidationErrors: function() {
+                $('div.form-error').remove();
+                $('.form-error').removeClass('form-error');
+            },
+
             destroy: function() { console.log('destory for ' + this.id); this._destroy(); this.remove(); },
 
             _destroy: function() {}
diff --git a/www/templates/en/details.html b/www/templates/en/details.html
index c90d972..dbd08cd 100644
--- a/www/templates/en/details.html
+++ b/www/templates/en/details.html
@@ -9,10 +9,10 @@
                 <div id="problem_form">
 
                     <label for="form_title">Subject</label>
-                    <input type="text" value="" name="title" id="form_title" placeholder="Provide a title" value="<%= title %>" required>
+                    <input type="text" name="title" id="form_title" placeholder="Provide a title" value="<%= title %>" required>
 
                     <label for="form_detail">Details</label>
-                    <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." value="<%= details %>"required></textarea>
+                    <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea>
 
                     <%= categories %>
                     <!--