Preview commit for field validation using bootstrap-validator. Do a `make...

Preview commit for field validation using bootstrap-validator. Do a `make boostrap && grunt` after merge

Gruntfile.js

@@ -79,6 +79,28 @@ module.exports = function (grunt) {
                     }
                 ]
             },
+            bootstrap_validator: {
+                files: [
+                    {
+                        cwd: 'bower_components/bootstrap-validator/dist/',
+                        src: [
+                            'validator.min.js'
+                        ],
+                        dest: 'js/',
+                        expand: true,
+                        flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-validator/dist/',
+                        src: [
+                            'validator.min.js'
+                        ],
+                        dest: typo3_js,
+                        expand: true,
+                        flatten: true
+                    }
+                ]
+            },
             jquery: {
                 files: [
                     {

bower.json

@@ -20,6 +20,7 @@
     "bootstrap": "~3.3.6",
     "jqwidgets": "*",
     "tablesorter": "jquery.tablesorter#^2.25.6",
-    "eventEmitter": "^4.3.0"
+    "eventEmitter": "^4.3.0",
+    "bootstrap-validator": "^0.10.2"
   }
 }

javascript/src/Form.js

@@ -97,7 +97,12 @@ var QfqNS = QfqNS || {};
      * @returns {*}
      */
     n.Form.prototype.validate = function () {
-        if (this.$form.attr('novalidate')) {
+        // uncommented because bootstrap-validator sets novalidate="true" on form.
+        //if (this.$form.attr('novalidate')) {
+        //    return true;
+        //}
+
+        if (document.forms[this.formId].checkValidity()) {
             return true;
         }
 
@@ -107,6 +112,7 @@ var QfqNS = QfqNS || {};
 
         var invalidElements = [];
 
+
         for (var i = 0; i < formElementsLength; i++) {
             var formElement = formElements[i];
             if (!formElement.willValidate) {

javascript/src/QfqForm.js

@@ -154,33 +154,6 @@ var QfqNS = QfqNS || {};
         this.eventEmitter.emitEvent('qfqform.destroyed', n.EventEmitter.makePayload(this, null));
     };
 
-    n.QfqForm.prototype.checkValidity = function () {
-        var isValid = this.form.validate();
-        if (isValid === true) {
-            return true;
-        }
-        var invalidFields = isValid;
-
-        this.markInvalidFields(invalidFields);
-
-        return false;
-    };
-
-    n.QfqForm.prototype.markInvalidFields = function (invalidFields) {
-        var that = this;
-        $.each(invalidFields, function (index, element) {
-            if (element.hasAttribute('name')) {
-                var elementName = element.getAttribute('name');
-                that.setValidationState(elementName, 'error');
-                // TODO: Make sure this is portable.
-                if (element.validationMessage) {
-                    that.setHelpBlockValidationMessage(elementName, element.validationMessage);
-                }
-            }
-        });
-
-    };
-
     /**
      * @private
      */
@@ -214,7 +187,9 @@ var QfqNS = QfqNS || {};
     };
 
     n.QfqForm.prototype.submit = function () {
-        if (!this.checkValidity()) {
+        if (this.form.validate() !== true) {
+
+            this.form.$form.validator();
             var alert = new n.Alert("Form is incomplete.", "warning");
             alert.show();
             return;

mockup/personmock.html

@@ -100,7 +100,7 @@
     </div>
 
 
-    <form id="myForm" class="form-horizontal">
+    <form id="myForm" class="form-horizontal" data-toggle="validator">
         <input type="hidden" name="s" value="badcaffee1234">
         <div class="tab-content">
 
@@ -134,7 +134,9 @@
                     </div>
 
                     <div class="col-md-6">
-                        <input id="firstname" name="firstname" type="text" class="form-control">
+                        <input id="firstname" name="firstname" type="text" class="form-control" required>
+
+                        <div class="help-block with-errors"></div>
                     </div>
                 </div>
 
@@ -143,7 +145,10 @@
                         <label for="nameShort" class="control-label">Vorname Kurz</label>
                     </div>
                     <div class="col-md-6">
-                        <input id="nameShort" name="shortname" type="text" class="form-control">
+                        <input id="nameShort" name="shortname" type="text" class="form-control" required
+                               data-error="Short name is required">
+
+                        <div class="help-block with-errors"></div>
                     </div>
 
                     <div class="col-md-4">
@@ -771,6 +776,7 @@
 
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
+<script src="../js/validator.min.js"></script>
 <script src="../js/jqx-all.js"></script>
 <script src="../js/EventEmitter.min.js"></script>
 <script src="../js/qfq.debug.js"></script>