Integrated InputMatcher into QfqForm.js

javascript/src/QfqForm.js

@@ -16,7 +16,7 @@ var QfqNS = QfqNS || {};
 (function (n) {
     'use strict';
 
-    // TODO: This object is getting too big. Start refactoring.
+    // TODO: This object is getting its own gravitational field. Start refactoring.
     /**
      * Represents a QFQ Form.
      *
@@ -38,6 +38,7 @@ var QfqNS = QfqNS || {};
         this.fileDeleteUrl = fileDeleteUrl;
 
         this.form = new n.Form(this.formId);
+        this.inputMatcher = new n.Validation.InputMatcher(this.formId);
         // This is required when displaying validation messages, in to activate the tab, which has validation issues
         this.bsTabs = null;
         this.lastButtonPress = null;
@@ -353,6 +354,12 @@ var QfqNS = QfqNS || {};
     };
 
     n.QfqForm.prototype.submit = function () {
+        var alert;
+        if (this.inputMatcher.validate() !== true) {
+            alert = new n.Alert("Form is incomplete.", "warning");
+            alert.show();
+            return;
+        }
         if (this.form.validate() !== true) {
 
             var element = this.form.getFirstNonValidElement();
@@ -367,7 +374,7 @@ var QfqNS = QfqNS || {};
             this.form.$form.validator('update');
             this.form.$form.validator('validate');
 
-            var alert = new n.Alert("Form is incomplete.", "warning");
+            alert = new n.Alert("Form is incomplete.", "warning");
             alert.show();
             return;
         }

mockup/inputconfirm.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="../css/bootstrap.min.css">
     <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="../css/jqx.base.css">
+    <link rel="stylesheet" href="../css/jqx.bootstrap.css">
     <link rel="stylesheet" href="../css/qfq-bs.css">
     <title>Input Confirm Mock</title>
 
@@ -79,7 +80,30 @@
           class='form-horizontal' data-toggle='validator'>
 
         <div class="form-group">
-            <div class='col-md-3 qfq-label'><label for="personEmail2">Email2</label></div>
+            <div class='col-md-3 qfq-label'><label for="personEmail" class="control-label">Email</label></div>
+            <div class='col-md-6'><input type="email" class="form-control" id="personEmail" name="personEmail"
+                                         placeholder="Email"
+                                         title="Tooltip"
+                                         data-toggle="tooltip" data-placement="right"
+                                         data-compare-element="personEmailRETYPE"></div>
+
+            <div class="help-block">Email of the person.</div>
+        </div>
+
+        <div class="form-group">
+            <div
+                    class='col-md-3 qfq-label'><label for="personEmailRETYPE" class="control-label">please
+                retype</label></div>
+            <div class='col-md-6'>
+                <input type="email" class="form-control" id="personEmailRETYPE"
+                       name="personEmailRETYPE"
+                       placeholder="Email" title="Tooltip"
+                       data-toggle="tooltip" data-placement="right"></div>
+            <div class="help-block"></div>
+        </div>
+
+        <div class="form-group">
+            <div class='col-md-3 qfq-label'><label for="personEmail2" class="control-label">Email2</label></div>
             <div class='col-md-6'><input type="email" class="form-control" id="personEmail2" name="personEmail2"
                                          placeholder="Email"
                                          title="Tooltip"
@@ -90,7 +114,9 @@
         </div>
 
         <div class="form-group">
-            <div class='col-md-3 qfq-label'><label for="personEmail2RETYPE">please retype</label></div>
+            <div
+                    class='col-md-3 qfq-label'><label for="personEmail2RETYPE" class="control-label">please
+                retype</label></div>
             <div class='col-md-6'>
                 <input type="email" class="form-control" id="personEmail2RETYPE"
                        name="personEmail2RETYPE"
@@ -152,8 +178,6 @@
             }
         });
 
-
-
         QfqNS.Log.level = 0;
 
     });