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

Added real-time form validation

Browse source
This commit is contained in:
gaazzopa 2020-11-14 16:30:20 +01:00
parent 1478bdd0b4
commit 6e10721adf
2 changed files with 54 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -140,6 +140,8 @@ function require_lunch(option) {
else {
document.getElementById("lunch_start").value = "";
document.getElementById("lunch_finish").value = "";
$("#lunch_finish").removeClass("red_border");
$("#lunch_time_error").hide();
}
}
@ -195,20 +197,22 @@ function validate_form(form) {
var submit = true;
//Validate all dates
$("input[required].datepicker").each(function () {
$("input[required].datepicker").each(function() {
//TODO: Use function validateDate()
$(this).removeClass("red_border");
$(this).next().hide();
var fromDate = $(this).val();
if (!isValidDate(fromDate)) {
$(this).addClass("red_border");
submit = false;
$(this).next().show();
submit = false;
}
});
//Validate all times
$("input[required].finish_time").each(function () {
$("input[required].finish_time").each(function() {
$(this).removeClass("red_border");
$(this).next().hide();
@ -224,7 +228,44 @@ function validate_form(form) {
return submit;
}
function validateDate() {
$(this).removeClass("red_border");
$(this).next().hide();
var fromDate = $(this).val();
if (!isValidDate(fromDate)) {
$(this).addClass("red_border");
$(this).next().show();
}
}
function validateFinishTime() {
$(this).removeClass("red_border");
$(this).next().hide();
var startTime = parseValToNumber($(this).prev());
var finishTime = parseValToNumber($(this));
if (startTime > finishTime) {
$(this).addClass("red_border");
$(this).next().show();
}
}
//TODO: Merge with validateFinishTime()
function validateStartTime() {
$(this).next().removeClass("red_border");
$(this).next().next().hide();
var startTime = parseValToNumber($(this));
var finishTime = parseValToNumber($(this).next());
if (startTime > finishTime) {
$(this).next().addClass("red_border");
$(this).next().next().show();
}
}
function isValidDate(date) {
if (date === "") return true;
var matches = /^(\d+)[-\/](\d+)[-\/](\d+)$/.exec(date);
if (matches == null) return false;
var d = matches[1];
@ -260,9 +301,15 @@ $(document).ready(function () {
// and update it when total people is changed.
setMaxInfectedPeople();
$("#total_people").change(setMaxInfectedPeople);
$("#activity_type").change(setMaxInfectedPeople);
$(".datepicker").each(validateDate);
$(".datepicker").change(validateDate);
$(".finish_time").each(validateFinishTime);
$(".finish_time").change(validateFinishTime);
$(".start_time").change(validateStartTime);
var radioValue = $("input[name='event_type']:checked");
if (radioValue.val()) {
require_fields(radioValue.get(0));

6
cara/apps/calculator/templates/calculator.form.html.j2
View file

@ -116,11 +116,11 @@
<option value="workshop">Workshop</option>
<option value="training">Training</option>
</select><br>
Start: <input type="time" id="activity_start" name="activity_start" value="09:00" required> &nbsp;&nbsp;
Start: <input type="time" id="activity_start" class="start_time" name="activity_start" value="09:00" required> &nbsp;&nbsp;
Finish: <input type="time" id="activity_finish" class="finish_time" name="activity_finish" value="18:00" required>
<span id="activity_time_error" class="red_text" hidden>Finish time must be after start</span><br>
Infected person(s) presence: <br>
Start: <input type="time" id="infected_start" name="infected_start" value="09:00" required> &nbsp;&nbsp;
Start: <input type="time" id="infected_start" class="start_time" name="infected_start" value="09:00" required> &nbsp;&nbsp;
Finish: <input type="time" id="infected_finish" class="finish_time" name="infected_finish" value="18:00" required>
<span id="infected_time_error" class="red_text" hidden>Finish time must be after start</span><br>
<hr width="80%">
@ -162,7 +162,7 @@
<label for="lunch_option">Yes</label><br>
<div id="DIVlunch_break">
Start: <input type="time" id="lunch_start" name="lunch_start" value="12:30" required> &nbsp;&nbsp;
Start: <input type="time" id="lunch_start" class="start_time" name="lunch_start" value="12:30" required> &nbsp;&nbsp;
Finish: <input type="time" id="lunch_finish" class="finish_time" name="lunch_finish" value="13:30" required>
<span id="lunch_time_error" class="red_text" hidden>Finish time must be after start</span><br>
</div>