add client side form validation in javascript using parsley + adding …

…bower to manage JS

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory" : "public/components"
+}

.gitignore

@@ -1,4 +1,5 @@
 /node_modules/*
 threatwiki.sublime-project
 .env
-*.sublime-workspace
+*.sublime-workspace
+public/components

README.md

@@ -1,6 +1,7 @@
 How to use (for all versions):
 - Make sure you have an instance of mongodb running
 - npm install -d
+- bower install
 - node app.js
 - Point your browser to [http://localhost:3000](http://localhost:3000)
 

bower.json

@@ -0,0 +1,8 @@
+{
+  "name": "Threatwiki",
+  "version": "1.0.0",
+  "directory": "public/components",
+  "dependencies": {
+    "parsleyjs": "~2.0.3"
+  }
+}

package.json

@@ -9,7 +9,7 @@
     "location": ">= 0.0.1",
     "everyauth": "git://github.com/bnoguchi/everyauth.git#e19b8273e2ca6e2bcd1f339bb154653e42b5d67d",
     "navigator": ">= 1.0.1",
-    "jquery":  "1.8.3",
+    "jquery": "1.8.3",
     "time": ">= 0.8.2",
     "vows": ">= 0.1.7",
     "tobi": ">= 0.3.2",

public/javascript/datapoint_form.js

@@ -1,4 +1,14 @@
 $(document).ready(function() {
+  //setup the form data validator
+  $('.datapoint_form').parsley({
+      successClass: 'success',
+      errorClass: 'error',
+      classHandler: function(el) {
+        return el.$element.closest('.control-group');
+      },
+      errorsWrapper: '<span class=\"help-inline\"></span>',
+      errorTemplate: '<span></span>'
+  });
   $('#event_date').datepicker();
   $('#tag_list').select2({
       width: 'resolve',
@@ -79,18 +89,15 @@ $(document).ready(function() {
       });
   });
 
-
-  $("#status").html("received");
-
-  // $.post()
+  // submit new datapoint (POST)
   datapoint_form.submit(function(){
+
     jQuery.post("/api/datapoint", datapoint_form.serialize(), function (data, textStatus, jqXHR) {
       //console.log("Post response:"); console.dir(data); console.log(textStatus); console.dir(jqXHR);
       //redirect to previous page after successful form submission
+
       window.location=referringURL;
     });
-    $("#status").html("posted");
-    $('#result').html(datapoint_form.serialize());
     return false;
   });
 
@@ -122,8 +129,6 @@ $(document).ready(function() {
       data: "archive=true",
       type: 'PUT'
     }).done(function() {
-     // $("#status").html("posted");
-      //$('#result').html(datapoint_form_update.serialize());
       //redirect to previous page after successful form submission
       window.location=referringURL;
     });
@@ -133,22 +138,21 @@ $(document).ready(function() {
   //When clicking on add button, adding a new line to add more sources
   $("#addbutton").click(function(){
     var lastInput = $("#sourcelist").find("input").eq(-2);
-    var lastId = lastInput.next();
+    var lastId = lastInput.nextAll("input[type=hidden]").first();
     var lastSelect = $("#sourcelist").find("select").eq(-1);
-
     //Make a copy of the inputURL on the next line
-    lastSelect.after('<br/>',lastInput.clone());
+    lastSelect.nextAll("br").first().after(lastInput.clone().removeAttr('data-parsley-id'));
     var newInput =  $("#sourcelist").find("input").eq(-1);
     //Add a copy of the last Select menu after the new inputURL
-    newInput.after(lastSelect.clone());
+    newInput.after('<span class="help-inline"></span>',lastSelect.clone().removeAttr('data-parsley-id'),'<br/>');
     newInput.after(lastId.clone());
     //Make sure those new elements are empty
     newInput.val("");
     newInput.next().val("");
     $("#sourcelist").find("select").eq(-1).val("");
   });
-
+  //setup the google map geocoder
   $(function() {
-    $('#location').autoGeocoder();
+    $('#location').autoGeocoder({position:'before'});
   });
 });

public/javascript/soc_form.js

@@ -1,5 +1,17 @@
 $(document).ready(function() {
-  // $.post()
+
+  //setup the form data validator
+  $('.soc_form').parsley({
+      successClass: 'success',
+      errorClass: 'error',
+      classHandler: function(el) {
+        return el.$element.closest('.control-group');
+      },
+      errorsWrapper: '<span class=\"help-inline\"></span>',
+      errorTemplate: '<span></span>'
+  });
+
+  //post, create new SOC
   soc_form.submit(function(){
     $("#title").val($("#titlecode option:selected").text());
     jQuery.post("/api/soc", soc_form.serialize(), function (data, textStatus, jqXHR) {
@@ -10,7 +22,7 @@ $(document).ready(function() {
     return false;
   });
 
-  // #.put()
+  //put, update existing SOC
   soc_form_update.submit(function(){
     var obj_id = $("input[name=id]").val();
     $("#title").val($("#titlecode option:selected").text());
@@ -36,14 +48,10 @@ $(document).ready(function() {
         data: "archive=true",
         type: 'PUT'
       }).done(function() {
-       // $("#status").html("posted");
-        //$('#result').html(datapoint_form_update.serialize());
         //redirect to soc list after archiving a soc
         window.location='/soc/';
       });
     }
     return false;
   });
-
-
 });

public/javascript/tag_form.js

@@ -1,6 +1,17 @@
 $(document).ready(function() {
 
-var already_included_soc = $('#soc').val();
+  //setup the form data validator
+  $('.tag_form').parsley({
+      successClass: 'success',
+      errorClass: 'error',
+      classHandler: function(el) {
+        return el.$element.closest('.control-group');
+      },
+      errorsWrapper: '<span class=\"help-inline\"></span>',
+      errorTemplate: '<span></span>'
+  });
+
+  var already_included_soc = $('#soc').val();
 
   // get socs
   var socs = jQuery.get("/api/soc/", function (socs, textStatus, jqXHR) {
@@ -16,33 +27,28 @@ var already_included_soc = $('#soc').val();
     });
   });
 
-  // $.post()
+  // create tag
   tag_form.submit(function(){
     jQuery.post("/api/tag", tag_form.serialize(), function (data, textStatus, jqXHR) {
       console.log("Post response:"); console.dir(data); console.log(textStatus); console.dir(jqXHR);
       window.location=referringURL;
     });
-    $("#status").html("posted");
-    $('#result').html(tag_form.serialize());
     return false;
   });
 
-  // #.put()
+  // update tag
   tag_form_update.submit(function(){
     var obj_id = $("input[name=id]").val();
     jQuery.ajax({
       url: "/api/tag/"+obj_id,
       data: tag_form_update.serialize(),
       type: 'PUT'
     }).done(function() { 
-      $("#status").html("posted");
-      $('#result').html(tag_form.serialize());
       window.location=referringURL;
     });
     return false;
   });
 
-   // #.put()
   //someone clicked Archive on the update form
   //TODO: Add confirmation dialog
   $("#archive").click(function(){
@@ -54,42 +60,10 @@ var already_included_soc = $('#soc').val();
       data: "archive=true",
       type: 'PUT'
     }).done(function() {
-     // $("#status").html("posted");
-      //$('#result').html(datapoint_form_update.serialize());
       //redirect to previous page after successful form submission
       window.location='/soc/view?soc='+soc_name;
     });
     return false;
   });
 
-  // $.get()
-  $("#get").click(function() {
-    $("#result").html('');
-    $("#status").html('');
-    $('#consumed_table').html('');
-
-    var tags = jQuery.get("/api/tag/", function (tags, textStatus, jqXHR) {
-      console.log("Get resposne:");
-      console.dir(tags);
-      console.log(textStatus);
-      console.dir(jqXHR);
-
-      $("#result").html(JSON.stringify(tags));
-      // return data in tabular format
-      $.each(tags, function(key, value) {
-        $('#consumed_table')
-        .append($("<tr></tr>")
-        .append($("<td></td>")
-        .append($("<a></a>")
-        .attr("href","/api/tag/"+value._id)
-        .text(value.title)))
-        .append($("<td></td>")
-        .append($("<a></a>")
-        .attr("href","/api/tag/delete/"+value._id)
-        .text("delete"))));
-      });
-    });
-
-  $("#status").html("received");
-  });
 });

public/stylesheets/global.css

@@ -92,3 +92,8 @@ table.dataTable th:active {
 .primaryButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; }
 .primaryButton:active { position:relative; top:1px; }
 #logo {  padding-bottom: 15px;  }
+.control-group.error input.parsley-validated{
+    color: #b94a48 !important;
+    background-color: #f2dede !important;
+    border: 1px solid #EED3D7 !important;
+}