Skip to content
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
@@ -0,0 +1,3 @@
{
"directory" : "public/components"
}
@@ -1,4 +1,5 @@
/node_modules/*
threatwiki.sublime-project
.env
*.sublime-workspace
*.sublime-workspace
public/components
@@ -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)

@@ -0,0 +1,8 @@
{
"name": "Threatwiki",
"version": "1.0.0",
"directory": "public/components",
"dependencies": {
"parsleyjs": "~2.0.3"
}
}
@@ -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;
}

0 comments on commit 83ac8fc

Please sign in to comment.
You can’t perform that action at this time.