better layout for various validation messages

static/css/comex_reg.css

@@ -28,6 +28,14 @@
 }
 
 
+.cartouche {
+  border: .4em dotted #988 ;
+  border-radius: 2em;
+  padding: 1em 3em;
+  text-align: center;
+}
+
+
 /* ==> a question + input block <== */
 .question {
   padding: 0 1em;
@@ -55,13 +63,6 @@
   min-width: 7.5em;
 }
 
-/* the main validation message (a special legend) */
-#main_validation_message {
-  font-size: 200%;
-  text-align:center;
-  /*color: #554 ;*/
-}
-
 /* the question's additional legend or caption */
 .legend {
   font-family: Cambria, serif;
@@ -99,12 +100,16 @@ h3.formcat {
   margin-top: 2em;
 }
 
+h3.formcatfirst {
+  margin-top: .5em;
+}
+
 .spacerrow {
-  height: 4em;
+  height: 2em;
 }
 
 .bigspacerrow {
-  height: 50em;
+  height: 15em;
 }
 
 .realperson-challenge {
@@ -116,9 +121,6 @@ h3.formcat {
 .realperson-regen {
   color: #554 ;
 }
-.bigspacerrow {
-  height: 50em;
-}
 
 .raw-responses {
   font-family: Calibri, sans-serif ;
@@ -128,3 +130,22 @@ h3.formcat {
   color: white;
   padding-bottom: 3em
 }
+
+
+/* the main validation message (a special legend) */
+#main_validation_message {
+  font-size: 200%;
+  text-align:center;
+  /*color: #554 ;*/
+}
+
+
+ul.minilabels {
+  padding-top: .5em;
+  list-style-type: none;
+  font-size: 75% ;
+}
+
+li.minilabel {
+    font-weight: bold ;
+}

static/js/comex_reg_form_controllers.js

@@ -382,7 +382,7 @@ function validateSubmit(wholeFormData, doorsResp) {
           // console.log("actualValue", actualValue)
 
           // test mandatory -----------------
-          if (mandatory && actualValue == null && actualValue != "") {
+          if (mandatory && (actualValue == null || actualValue == "")) {
               // todo human-readable fieldName here
               missingFields.push(fieldName)
               valid = false
@@ -433,20 +433,16 @@ function validateSubmit(wholeFormData, doorsResp) {
         else {
 
           console.warn("form is not valid")
-          // TODO better user message
           // TODO highlight invalid fields
           submitButton.disabled = false
 
-          var errorMessage = ""
-
+          var errorMessage = ''
           if (missingFields.length) {
-             errorMessage += "<br/>Please fill the missing fields: " + JSON.stringify(missingFields)
-          }
-          // TODO should be handled question by question
-          if (toolongFields.length) {
-             errorMessage += "<br/>Please shorten the following fields: " + JSON.stringify(toolongFields)
+             errorMessage += "Please fill the missing fields: " + ulListFromLabelsArray(missingFields, ["red"])
           }
 
+          // length is handled by each input's maxlength
+
           // display (TODO setTimeout and fade)
           mainMessage.innerHTML = errorMessage
           return false
@@ -456,7 +452,16 @@ function validateSubmit(wholeFormData, doorsResp) {
 }
 
 
-
+function ulListFromLabelsArray(strArray, ulClassList) {
+    ulClasses=["minilabels"].concat(ulClassList).join(" ")
+    var resultHtml = '<ul class="'+ulClasses+'">'
+    for (var i in strArray) {
+        var label = strArray[i].replace(/_/, " ")
+        resultHtml += '<li class="minilabel">'+label+'</li>'
+    }
+    resultHtml += '</ul>'
+    return resultHtml
+}
 
 
 var fileInput = document.getElementById('pic_file')
@@ -620,16 +625,16 @@ var passwords = [pass1, pass2]
 
 
 // £DEBUG autofill ----------->8------
-first_name.value = "Jean"
-last_name.value = "Tartampion"
-initialsInput.value="JPP"
-document.getElementById('country').value = "France"
-email.value= makeRandomString(10)+"@om.fr"
-pass1.value="123456+789"
-pass2.value="123456+789"
-document.getElementById('jobtitle').value = "atitle"
-document.getElementById('keywords').value = "Blabla"
-document.getElementById('institution').value = "CNRS"
+// first_name.value = "Jean"
+// last_name.value = "Tartampion"
+// initialsInput.value="JPP"
+// document.getElementById('country').value = "France"
+// email.value= makeRandomString(10)+"@om.fr"
+// pass1.value="123456+789"
+// pass2.value="123456+789"
+// document.getElementById('jobtitle').value = "atitle"
+// document.getElementById('keywords').value = "Blabla"
+// document.getElementById('institution').value = "CNRS"
 // --------------------------->8------
 
 

templates/base_form.html

@@ -91,7 +91,7 @@
         <div class="subpage" id="subpage_1" style="display:block">
 
               <!-- NAME & COUNTRY -->
-              <h3 class="formcat"> Basic infos </h3>
+              <h3 class="formcatfirst"> Basic infos </h3>
 
               <div class="question input-group">
                 <label for="first_name" class="smlabel input-group-addon">
@@ -266,7 +266,7 @@
           <div class="subpage" id="subpage_2">
 
             <!-- OTHER PERSONAL INFO -->
-            <h3 class="formcat"> Complementary information </h3>
+            <h3 class="formcatfirst"> Complementary information </h3>
 
             <div class="question">
               <div class="input-group">
@@ -321,9 +321,9 @@
             </div>
 
             <!-- CNIL WARNING -->
-            <h3 class="formcat"> About your data </h3>
 
-            <div class="question" id="cnil_warning">
+            <h3 class="formcat"> About your data </h3>
+            <div class="cartouche" id="cnil_warning">
               <p>Les informations recueillies à partir de ce formulaire font l’objet d’un traitement
                  informatique destiné à: </p>
                  <p><strong>communityexplorer.org</strong></p>
@@ -339,15 +339,11 @@
                 loi « informatique et libertés » du 6 janvier 1978 modifiée</a>,
                 vous disposez d’un <a href="https://www.cnil.fr/fr/le-droit-dacces">droit d’accès</a>
                 et <a href="https://www.cnil.fr/fr/le-droit-de-rectification">de rectification</a>
-                aux informations qui vous concernent.
-              </p>
-              <p>Vous pouvez accèder aux informations vous concernant en vous adressant à :</p>
+                aux informations qui vous concernent, en vous adressant à :</p>
               <p class="rtecenter"><strong>todo@iscpif.fr</strong></p>
               <p>Vous pouvez également, pour des motifs légitimes,
                 <a href="https://www.cnil.fr/fr/le-droit-dopposition">vous opposer au traitement
-                  des données vous concernant</a>.
-              </p>
-              <p>Pour en savoir plus, <a href="https://www.cnil.fr/fr/comprendre-vos-droits">
+                  des données vous concernant</a>. Pour en savoir plus, <a href="https://www.cnil.fr/fr/comprendre-vos-droits">
                 consultez vos droits sur le site de la CNIL</a>.
               </p>
             </div>
@@ -377,7 +373,14 @@
           <input id="my-captchaHash" name="my-captchaHash" type="text" hidden>
           </input>
 
-          <div class="row spacerrow">&nbsp;</div><div class="row spacerrow">&nbsp;</div>
+
+          <div class="subpage" id="subpage_3" style="display:block">
+              <div class="row spacerrow">&nbsp;</div>
+
+
+              <!-- main validation message -->
+              <p id="main_validation_message" class="legend" style="display:none"></p>
+
 
               <!-- CAPTCHA & SUBMIT BTN + INFOS-->
               <h3 class="formcat">Verify and submit</h3>
@@ -392,8 +395,6 @@
                        onblur="makeBold(this)" onfocus="makeNormal(this)">
               </div>
 
-          <div class="row spacerrow">&nbsp;</div>
-
               <!-- == S U B M I T == -->
               <!-- button instead of input.submit to validate before real submit action -->
               <!-- also remember stackoverflow.com/a/3315016/2489184 -->
@@ -403,10 +404,9 @@
                       Submit your form
               </button>
 
-          <!-- main validation message -->
-          <p id="main_validation_message" class="legend" style="display:none"></p>
 
             </form>
+        </div>
 
         <!-- FOR DEBUG: test go-between with Doors -->
         <!-- <p>
@@ -425,8 +425,7 @@
       <div class="spacer col-sm-2 col-md-2">&nbsp;</div>
     </div>
 
-    <div class="row spacerrow">&nbsp;</div>
-    <div class="row spacerrow">&nbsp;</div>
+    <div class="row bigspacerrow">&nbsp;</div>
 
     <!-- FOOTER TEXT AND LINKS -->
     <footer>

templates/thank_you.html

@@ -86,8 +86,7 @@
           <p> {{key}} {{records[key]}} </p>
         {% endfor %}
 
-        <h5>debug message</h5>
-        <p>
+        <p style="font-family: monospace; font-weight: bold">
             {{message|safe}}
         </p>
       </div>