client side verification of year field in note upload dialog
authorCharles Holbrow <charlesholbrow@gmail.com>
Thu, 18 Apr 2013 20:58:23 +0000 (16:58 -0400)
committerCharles Holbrow <charlesholbrow@gmail.com>
Thu, 18 Apr 2013 20:58:23 +0000 (16:58 -0400)
karmaworld/apps/notes/views.py
karmaworld/assets/js/lightboxupload.js

index d2865a2233d22e81ca6fa3d4401d67d09485cead..cdae61dea5de51509bdf6931992f1d2070a33a76 100644 (file)
@@ -50,7 +50,7 @@ class NoteSaveView(FormView, SingleObjectMixin):
             namely, saving the new data to the existing note object
         """
         self.object = self.get_object()
-        if len(form.cleaned_data['name']) > 0:
+        if len(form.cleaned_data['name'].strip()) > 0:
             self.object.name = form.cleaned_data['name']
         self.object.year = form.cleaned_data['year']
         # use *arg expansion to pass tags a list of tags
index 725e70f5625282b0f0a6793afc32e77741f3c610..081a8e1ade713627ad3c8b488b4e03d8589caf04 100644 (file)
@@ -1,5 +1,24 @@
 $(function(){
 
+  var showForm = function() {
+    $('#add-note-form').show();
+    $('#add-note-btn').hide();
+  };
+  var hideForm = function() {
+    $('#add-note-form').hide();
+    $('#add-note-btn').show();
+  };
+
+  // some but not all validation happens here
+  var validateAndSubmit = function() {
+    var year = $('#id_year').val()
+    if (year.match(/\d{4}/) || year === '') {
+      $('form#add-note').submit();
+    } else {
+      $("#id_year").css({'background-color': '#f05a28'});
+      console.log('Date is invalid');
+    };
+  };
 
   // check if we arrived at this page planning on uploading a note
   if(window.location.hash) {
@@ -7,30 +26,24 @@ $(function(){
     // Get the first hash, remove the # character
     var hash = window.location.hash.substring(1);
     if (hash === 'upload-note'){
-      $('#add-note-form').show();
-      $('#add-note-btn').hide();
+      showForm();
     }
   }
 
   $('#add-note-btn').click(function(){
     // hide the thankyou message on add-another uploads
     $('#thankyou-wrapper').hide();
-    // show the add note form
-    // TODO: rewrite to .show the form with a slide transition
-    $('#add-note-form').show();
+    showForm();
     // Bring up the file picker automatically
     $('input#file_upload_input').click();
-    // hide the add a note button
-    $('#add-note-btn').hide();
     // disable the save button -- it will be enabled when the upload is complete
     $('#save-btn').addClass('disabled');
   });
 
 
   // Dismiss x click
-  $(".icon-remove-circle").click(function() {
-    $("#add-note-form").hide();
-    $('#add-note-btn').show();
+  $(".icon-remove-sign").click(function() {
+    hideForm();
   });
 
   var uploader = new qq.FileUploader( {
@@ -60,22 +73,18 @@ $(function(){
           $('form#add-note').attr('action', responseJSON.note_url);
           // inform the user of success
           $('#add-note-status').text('Uploaded');
-          // TODO: activate the save button
+          // activate the save button
           $('#save-btn').removeClass('disabled');
-          // add the save url to form as ACTION
-
           // add a click handler to submit the add-note form
           $('#save-btn').click(function(){
-            $('form#add-note').submit();
+            validateAndSubmit();
           });
-
         }
       },
       onAllComplete: function( uploads ) {
         // uploads is an array of maps
         // the maps look like this: { file: FileObject, response: JSONServerResponse }
-        console.log( "All complete!" ) ;
-        // TODO: set a success state
+        console.log( "All complete!" );
       },
       onProgress: function(id, fileName, loaded, total) {
         console.log("running onProgress " + fileName + " " + loaded);
@@ -85,6 +94,7 @@ $(function(){
           width: String((100*loaded/total)+'%')}, 200);
         // fill out the filename
         $('#filename').text(fileName);
+        $('#id_name').attr('placeholder', fileName);
       },
       params: {
         'csrf_token': csrf_token,