More obvious required fields. Added dot to tabs with errors.

javascript/src/BSTabs.js

@@ -114,9 +114,12 @@ var QfqNS = QfqNS || {};
 
         n.Log.debug("BSTabs.tabShowHandler(): invoke user handler(s)");
         this.eventEmitter.emitEvent('bootstrap.tab.shown', n.EventEmitter.makePayload(this, null));
+        this.removeDot(this.currentTab);
         n.Log.debug('Exit: BSTabs.tabShowHandler()');
     };
 
+    
+
     /**
      * Get all tab IDs.
      *
@@ -164,6 +167,7 @@ var QfqNS = QfqNS || {};
         }
 
         $(this.tabs[tabId].element).tab('show');
+        this.removeDot(tabId);
         return true;
     };
 
@@ -180,6 +184,27 @@ var QfqNS = QfqNS || {};
         return $(this.tabs[tabId].element).text().trim();
     };
 
+    n.BSTabs.prototype.setTabName = function (tabId, text) {
+        if(!this.tabs[tabId]) {
+            console.error("Unable to find tab with id: " + tabId);
+        }
+        var $tab = $(this.tabs[tabId].element);
+        $tab.text(text);
+    };
+
+    n.BSTabs.prototype.addDot = function(tabId) {
+        var $tab = $(this.tabs[tabId].element);
+        $tab.find(".qfq-dot").remove();
+        var $coolBadge = $("<span>", {
+            class: 'qfq-dot'
+        });
+        $tab.append($coolBadge);
+    };
+
+    n.BSTabs.prototype.removeDot = function(tabId) {
+        $(this.tabs[tabId].element).find(".qfq-dot").remove();
+    };
+
     n.BSTabs.prototype.getActiveTab = function () {
         return this.currentTab;
     };

javascript/src/Element/FormGroup.js

@@ -92,14 +92,14 @@ QfqNS.Element = QfqNS.Element || {};
      * @private
      */
     n.FormGroup.prototype.$findFormGroup = function ($enclosedElement) {
-        var $formGroup = $enclosedElement.closest("div.form-group");
-
+        var $formGroup = $('#' + $enclosedElement.attr('id') + '-i');
+        
         if (!$formGroup || $formGroup.length === 0) {
             throw new Error("Unable to find Form Group");
         }
 
         if ($formGroup.length > 1) {
-            $formGroup = $('#' + $enclosedElement.attr('id') + '-r');
+            $formGroup = $('#' + $enclosedElement.attr('id') + '-i');
             console.log("Enclosed Element Id: " + $enclosedElement.attr('id'));
             if ($formGroup.length !== 1) {
                 throw new Error("enclosed element yields ambiguous form group");
@@ -181,9 +181,9 @@ QfqNS.Element = QfqNS.Element || {};
      */
     n.FormGroup.prototype.setError = function (isError) {
         if (isError) {
-            this.$formGroup.addClass("has-error has-danger");
+            this.$formGroup.addClass("hullahoop has-error has-danger");
         } else {
-            this.$formGroup.removeClass("has-error has-danger");
+            this.$formGroup.removeClass("hullahoop has-error has-danger");
         }
     };
 

javascript/src/QfqForm.js

@@ -619,16 +619,39 @@ var QfqNS = QfqNS || {};
                 if (tabId) {
                     this.bsTabs.activateTab(tabId);
                 }
+
+
+                var form = document.getElementById(this.form.formId);
+                var inputs = form.elements;
+                
+                for (var i = 0; i < inputs.length; i++) {
+                    var e = inputs[i];
+                    if(!e.willValidate) {
+                        continue;
+                    }
+                    if(!e.checkValidity()) {
+                        var updateTabId = this.bsTabs.getContainingTabIdForFormControl(e.getAttribute('name'));
+                        if(updateTabId != tabId) {
+                            this.bsTabs.addDot(updateTabId);
+                        }
+                    }
+                }
             }
 
             // Since we might have switched the tab, re-validate to highlight errors
-            this.form.$form.validator('update');
-            this.form.$form.validator('validate');
+            //this.form.$form.validator('update');
+            //this.form.$form.validator('validate');
 
             alert = new n.Alert("Form is incomplete.", "warning");
             alert.timeout = 3000;
             alert.show();
 
+            this.form.$form.each(function() {
+                if (!$(this).validate) {
+
+                }
+            });
+
             if (!this.skipRequiredCheck) {
                 return;
             }
@@ -640,7 +663,6 @@ var QfqNS = QfqNS || {};
             this.clearAllValidationStates();
         }
 
-
         submitReason = {
             "submit_reason": this.lastButtonPress === "close" ? "save,close" : this.lastButtonPress
         };
@@ -1100,6 +1122,7 @@ var QfqNS = QfqNS || {};
     };
 
     n.QfqForm.prototype.getFormGroupByControlName = function (formControlName) {
+        console.log("Form Control Name: " + formControlName);
         var $formControl = $("[name='" + formControlName + "']");
         if ($formControl.length === 0) {
             n.Log.debug("QfqForm.setValidationState(): unable to find form control with name '" + formControlName + "'");
@@ -1123,12 +1146,13 @@ var QfqNS = QfqNS || {};
         var $formGroup = this.getFormGroupByControlName(formControlName);
         if ($formGroup) {
             $formGroup.addClass("has-" + state);
+            $formGroup.addClass("testitest");
         }
     };
 
     n.QfqForm.prototype.resetValidationState = function (formControlName) {
-        var $formGroup = this.getFormGroupByControlName(formControlName);
-        $formGroup.removeClass("has-warning");
+        var $formGroup = this.getFormGroupByControlName(formControlName).find('input');
+        $formGroup.removeClass("has-danger");
         $formGroup.removeClass("has-error");
         $formGroup.removeClass("has-success");
         $formGroup.removeClass("has-danger");

less/qfq-bs.css.less

@@ -34,10 +34,31 @@ i.@{spinner_class} {
   width: 16px;
 }
 
+.qfq-dot {
+  display: inline-block;
+  height: 5px;
+  width: 5px;
+  margin: 2px;
+  margin-left: 5px;
+  background-color: #f2b867;
+  border-radius: 50%;
+}
+
 .alert-buttons {
   margin-top: 10px;
 }
 
+.has-error .form-control {
+  background-color: #fcf8e3;
+  border-width: medium;
+  border-color: #f2b867;
+}
+
+.has-error .form-control:focus {
+  background-color: #fcf8e3;
+  border-color: #f2b867;
+}
+
 /* inline elements in horizontal mode are too much left */
 .form-horizontal {
   .form-inline {