Permalink
Browse files

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

…bower to manage JS
  • Loading branch information...
jeromegv committed Jul 25, 2014
1 parent f761dd9 commit 83ac8fc41ed022577c30c574bfde35bf8b3cf40c
View
@@ -0,0 +1,3 @@
+{
+ "directory" : "public/components"
+}
View
@@ -1,4 +1,5 @@
/node_modules/*
threatwiki.sublime-project
.env
-*.sublime-workspace
+*.sublime-workspace
+public/components
View
@@ -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)
View
@@ -0,0 +1,8 @@
+{
+ "name": "Threatwiki",
+ "version": "1.0.0",
+ "directory": "public/components",
+ "dependencies": {
+ "parsleyjs": "~2.0.3"
+ }
+}
View
@@ -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",
@@ -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'});
});
});
@@ -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;
});
-
-
});
@@ -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");
- });
});
@@ -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;
+}
Oops, something went wrong.

0 comments on commit 83ac8fc

Please sign in to comment.