diff options
| -rw-r--r-- | www/index.html | 1 | ||||
| -rw-r--r-- | www/js/views/details.js | 38 | ||||
| -rw-r--r-- | www/js/views/fms.js | 15 | ||||
| -rw-r--r-- | www/templates/en/details.html | 4 |
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 %> <!-- |