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>