From 3d80e054c10f1dca4088fec9b552d8d8b338c903 Mon Sep 17 00:00:00 2001
From: gaazzopa <gabriella.azzopardi@cern.ch>
Date: Fri, 6 Nov 2020 20:06:29 +0100
Subject: [PATCH] Added datepicker validation

---
 cara/apps/calculator/static/css/form.css |  8 ++++--
 cara/apps/calculator/static/form.html    |  6 ++--
 cara/apps/calculator/static/js/form.js   | 36 ++++++++++++++++++++++--
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/cara/apps/calculator/static/css/form.css b/cara/apps/calculator/static/css/form.css
index 9eb2b9c5..20441bbf 100644
--- a/cara/apps/calculator/static/css/form.css
+++ b/cara/apps/calculator/static/css/form.css
@@ -2,6 +2,10 @@
 	color: gray;
 }
 
-disabled {
+.disabled {
 	color: black;
-}
\ No newline at end of file
+}
+
+.red {
+  box-shadow: 0px 0px 2px 1px red;
+}
diff --git a/cara/apps/calculator/static/form.html b/cara/apps/calculator/static/form.html
index 22059db8..d7ac9946 100644
--- a/cara/apps/calculator/static/form.html
+++ b/cara/apps/calculator/static/form.html
@@ -18,7 +18,7 @@
 Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></span>
 <h1> <p><b>CARA</b> Covid Airborne Risk Assessment tool</p></h1>
 
-<form id="covid_calculator" name="covid_calculator" action="/calculator/report" method="POST"> <!--DEBUG onsubmit="debug_submit(this)"-->
+<form id="covid_calculator" name="covid_calculator" action="/calculator/report" onsubmit="return validate_form(this)" method="POST">
 
 <div style="width: 33%; float:left;">
 
@@ -94,8 +94,8 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
     When is the event?<br>
     <input type="radio" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)" required></input>
     <label for="event_type_single">Single event</label> &nbsp;&nbsp;
-    <label for="datepicker">Date: </label>
-    <input type="text" id="datepicker" name="single_event_date"><br>
+    <label for="single_event_date">Date: </label>
+    <input type="text" id="single_event_date" class="datepicker" name="single_event_date"><br>
     <input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)" required></input>
     <label for="event_type_recurrent">Recurrent usage</label>
     <select id="recurrent_event_month" name="recurrent_event_month">
diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index 588376c3..ba66078f 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -130,7 +130,7 @@ function require_air_supply(option) {
 } }
 
 function require_single_event(option) {
-  $("#datepicker").prop('required',option);
+  $("#single_event_date").prop('required',option);
 }
 
 function require_lunch(option) {
@@ -140,8 +140,9 @@ function require_lunch(option) {
 
 /* -------UI------- */
 $(function() {
-  $("#datepicker").datepicker();
-});  
+  $(".datepicker").datepicker({
+    dateFormat: 'mm/dd/yy'});
+});
 
 $( function() {
   $(".dialog").dialog({modal:true});
@@ -164,6 +165,35 @@ function show_disclaimer() {
     $("#DIALOG_welcome").dialog("option", "height", 600);
 } }
 
+/* -------Form validation------- */
+function validate_form(form) {
+
+  var submit = true;
+
+  //Validate all dates
+  $(".datepicker").each(function() {
+    $(this).removeClass("red");
+
+    var fromDate = $(this).val();
+    if (!isValidDate(fromDate)) {
+      $(this).addClass("red");
+      submit = false;
+  } }); 
+
+  return submit;
+}
+
+function isValidDate(date) {
+  var matches = /^(\d+)[-\/](\d+)[-\/](\d+)$/.exec(date);
+  if (matches == null) return false;
+  var d = matches[2];
+  var m = matches[1];
+  var y = matches[3];
+  if (y > 2100 || y < 1900) return false; 
+  var composedDate = new Date(y+'/'+m+'/'+d);
+  return composedDate.getDate() == d && composedDate.getMonth()+1 == m && composedDate.getFullYear() == y;
+}
+
 /* -------Debugging------- */
 function debug_submit(form){