From 54baa8633abf021318273aeeb76595bfffbc496f Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 18 Feb 2020 12:01:36 +0100
Subject: [PATCH] Add Feedback for select field in job forms
---
app/services/views.py | 2 +-
app/static/js/nopaque.js | 17 +++++++++++++++--
app/templates/services/ocr.html.j2 | 2 +-
3 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/app/services/views.py b/app/services/views.py
index 1605f666..d8492544 100644
--- a/app/services/views.py
+++ b/app/services/views.py
@@ -31,7 +31,7 @@ def service(service):
if service == 'corpus_analysis':
return render_template('services/{}.html.j2'.format(service),
title=SERVICES[service]['name'])
- add_job_form = SERVICES[service]['add_job_form']()
+ add_job_form = SERVICES[service]['add_job_form'](prefix='add-job-form')
if add_job_form.is_submitted():
if not add_job_form.validate():
return make_response(add_job_form.errors, 400)
diff --git a/app/static/js/nopaque.js b/app/static/js/nopaque.js
index fb87044d..629a4434 100644
--- a/app/static/js/nopaque.js
+++ b/app/static/js/nopaque.js
@@ -21,10 +21,23 @@ nopaque.foreignJobsSubscribers = [];
// nopaque functions
nopaque.forms = {};
nopaque.forms.init = function() {
- var abortRequestElement, progressElement, progressModal,
- progressModalElement, request;
+ var abortRequestElement, parentElement, progressElement, progressModal,
+ progressModalElement, request, submitElement;
for (let form of document.querySelectorAll(".nopaque-job-form")) {
+ submitElement = form.querySelector('button[type="submit"]');
+ submitElement.addEventListener("click", function() {
+ for (let selectElement of form.querySelectorAll('select')) {
+ if (selectElement.value === "") {
+ parentElement = selectElement.closest(".input-field");
+ for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
+ helperTextElement.remove();
+ }
+ parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
+ }
+ }
+ })
+
request = new XMLHttpRequest();
if (form.dataset.hasOwnProperty("progressModal")) {
progressModalElement = document.getElementById(form.dataset.progressModal);
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index 43910b4c..bbc6a017 100644
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@@ -185,7 +185,7 @@
</div>
</div>
<div class="card-action right-align">
- <button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
+ <button class="btn waves-effect waves-light" id="add-job-form-submit" name="add-job-form-submit" type="submit">Submit<i class="material-icons right">send</i></button>
</div>
</form>
</div>
--
GitLab