pingu_98/cara
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'Form-validation' into 'master'

Browse source 
Added datepicker validation

See merge request cara/cara!56
This commit is contained in:
Philip James Elson 2020-11-06 19:47:26 +00:00
commit 78bdc92eeb
3 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
cara/apps/calculator/static/css/form.css
View file

@ -2,6 +2,10 @@
color: gray;
}
disabled {
.disabled {
color: black;
}
}
.red {
box-shadow: 0px 0px 2px 1px red;
}

6
cara/apps/calculator/static/form.html
View file

@ -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">

36
cara/apps/calculator/static/js/form.js
View file

@ -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){