Fix registration code form button from disabling on invalid entry

Problem was code disabling the button right away rather than waiting and disabling it
after the form is validated to prevent multiple submissions

For the submitHandler in the Jquery Validation Plugin to get called, it requires
a button inside the form with the type='submit'. This was missing.

In the implementation.py file, the function get_ajax_check_ffq_code validates the form
entry, and it needs to return a JSON value of true or false since it is returning the value
to a JavaScript function that doesn't understand python True or False. This function
was changed to return a JSON dump of a True or False value.

Put the submitHandler of the validator outside the 'rules' object in order
for it to be called.

Test using a return value of True in the function get_ajax_check_ffq_code in the
implementation.py file to call the submit handler function.

Add comment in submit handler function to add code to call a function in the
submit handler.

microsetta_interface/implementation.py

@@ -874,7 +874,8 @@ def get_ajax_check_ffq_code(ffq_code):
     except:  # noqa
         return_val = False
 
-    return return_val
+    # Convert to JSON for returning to JavaScript call
+    return json.dumps(return_val)
 
 
 def _associate_sample_to_survey(account_id, source_id, sample_id, survey_id):

microsetta_interface/templates/nutrition.jinja2

@@ -44,43 +44,39 @@
             preventImplicitSubmission(form_name);
             preclude_whitespace('#ffq_code');
 
-            $("form[name='" + form_name + "']").on('submit', function() {
-                document.getElementById("ffq_code_button").disabled = true;
-            });
+            function handleSubmit() {
+                // TODO go to page since form validated
+                console.log('submitted form')
+            };
 
-            // Initialize form validation on the registration form.
-            // It has the name attribute "registration"
+            // Validate the registration form for a valid
+            // registration code using the jQuery validation plugin.
+            // If the form is not valid, the messages are displayed
             $("form[name='" + form_name + "']").validate({
                 // Specify validation rules
                 rules: {
-                    // The key name on the left side is the name attribute
-                    // of an input field. Validation rules are defined
-                    // on the right side
+                    // The key is the form input field name attribute and the validation rules
+                    // are defined in the value object
+                    // The route check_ffq_code_valid returns
+                    // either true or false
                     ffq_code: {
                         required: true,
                         remote: {
                             url: "/check_ffq_code_valid",
                         }
-                    },
-                    submitHandler: function (form) {
-                        form.submit();
                     }
                 },
+                submitHandler: function (form, event) {
+                    // prevent multiple submissions
+                    document.getElementById("ffq_code_button").disabled = false;
+                    handleSubmit(form);
+                },
                 messages: {
                     ffq_code: "{{ _('Your registration code is not in our system or has already been used. Please try again.') }}",
                 },
             });
-        });
 
-        /*
-        function updateButtonState(ffq_code_value) {
-            if(ffq_code_value != "") {
-                document.getElementById("ffq_code_button").disabled = false;
-            } else {
-                document.getElementById("ffq_code_button").disabled = true;
-            }
-        }
-        */
+        });
 
         function openCodePanel() {
             document.getElementById('add_code_container').style.display = '';
@@ -216,7 +212,7 @@
                             </div>
                         </div>
                         <div class="col-12 text-center mt-4">
-                            <button class="btn btn-blue-gradient" name="ffq_code_button" id="ffq_code_button">{{ _('Register FFQ') }}</button>
+                            <button type="submit" class="btn btn-blue-gradient" name="ffq_code_button" id="ffq_code_button">{{ _('Register FFQ') }}</button>
                         </div>
                     </div>
                 </div>