better submit strategy with validation in js

base_form.html

@@ -84,7 +84,6 @@
         <!-- ########################### ( FORM ) ########################## -->
         <form id="comex_reg_form" enctype="multipart/form-data"
               method="post"
-              onsubmit="whileSubmit(this, 'from form')"
               action="cgi-bin/comex_merci_pour_les_infos.py.cgi"
               onchange="testYourself()">
 
@@ -337,7 +336,7 @@
 
           <div class="row spacerrow">&nbsp;</div><div class="row spacerrow">&nbsp;</div>
 
-          <!-- CAPTCHA -->
+          <!-- CAPTCHA & SUBMIT BTN + INFOS-->
           <h3 class="formcat">Verify and submit</h3>
 
           <!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
@@ -353,8 +352,16 @@
           <div class="row spacerrow">&nbsp;</div>
 
           <!-- == S U B M I T == -->
-          <input type="submit" class="btn btn-lg btn-success" style="float:right"
-                 id="formsubmit" value="Submit your form" />
+          <!-- button instead of input.submit to validate before real submit action -->
+          <!-- NB also favorable side-effect: prevents ENTER from submitting -->
+          <button class="btn btn-lg btn-success" style="float:right"
+                  id="formsubmit"
+                  onclick="validateSubmit(this.parent, 'from main submit button')">
+                  Submit your form
+          </button>
+
+          <!-- main validation message -->
+          <p id="main_validation_message" class="legend" style="display:none"></p>
 
         </form>
 

static/css/comex_reg.css

@@ -55,6 +55,14 @@
   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;
@@ -65,6 +73,8 @@
   margin: 0;
 }
 
+
+
 /* page sections: style snippets from old bootstrap h2 */
 h2.oldstyle {
   font-family: Ubuntu, sans-serif;

static/js/comex_reg_form_controllers.js

@@ -13,24 +13,39 @@ var colorRed = '#910'
 var colorGreen = '#161'
 var colorGrey = '#554'
 
-
-// 2 actions to do on form submit
-// => block the submit button to avoid resubmit before response
-// => transmit to doors
+// validateSubmit() : 5 actions to do on form submit
+// --------------------------------------------------
+// 1) show "submitting" and block the button to avoid resubmit before response
+// 2) transmit to doors
+// 3) validate the doors answer (+ get the doors user ID)
+// 4) validate the columns
+// 5) if 3&4 => trigger the real submit action
+//      else => message the user & unblock the button
 var submitButton = document.getElementById('formsubmit')
-function whileSubmit(form, orignStr, loginOrRegister) {
+var mainMessage = document.getElementById('main_validation_message')
+function validateSubmit(form, orignStr, loginOrRegister) {
+
+    var valid = false
+    var doorsUid = null
+
+    // 1)
+    submitButton.disabled = true
+    mainMessage.style.display = 'block'
+    mainMessage.innerHTML = "Submitting..."
+
+    console.log("form", form)
+
+    // 2) transmit registration to doors
     console.warn("=====> CORS <=====")
     console.warn("origin:", orignStr)
-    // submitButton.disabled = true
+
+    mainMessage.innerHTML = "Registering with ISCPIF Doors..."
 
     var action = 'register'
     if (loginOrRegister && loginOrRegister == 'login') {
         action = 'user'
     }
 
-    console.log("form", form)
-
-    // £TEST normal case: login to doors and wait for response
     $.ajax({
         contentType: "application/json",
         dataType: 'json',
@@ -45,17 +60,43 @@ function whileSubmit(form, orignStr, loginOrRegister) {
         success: function(data) {
             console.log("ajax success")
             console.log("response data", data)
-            console.log("response data.id", data.id)
+
+            // EXPECTED DOORS ANSWER
+            // {
+            //   "status": "login ok",
+            //   "userInfo": {
+            //     "id": {
+            //       "id": "78407900-6f48-44b8-ab37-503901f85458"
+            //     },
+            //     "password": "68d23eab21abab38542184e8fca2199d",
+            //     "name": "JPP",
+            //     "hashAlgorithm": "PBKDF2",
+            //     "hashParameters": {"iterations" : 1000, "keyLength" : 128}
+            //   }
+            // }
+
+            doorsUid = data.userInfo.id.id
             setTimeout(
                 function() {
                     location.reload();
                 }, 5000);
             },
             error: function(result) {
-                console.log("ajax error");
+                console.log("ajax error", result);
             }
     });
 
+    // TODO here entire validation
+
+    if (valid) {
+      form.submit()
+      mainMessage.innerHTML = "Submitting..."
+      mainMessage.style.display = 'block'
+    }
+    else {
+      // TODO global user message
+      submitButton.disabled = false
+    }
     console.warn("=====> end of whileSubmit <=====")
 }