Added form validation (sort of)

javascript/src/Form.js

@@ -92,4 +92,33 @@ var QfqNS = QfqNS || {};
         // REMOVE: this.userSubmitFailureHandlers.call(this, textStatus, jqXHR, errorThrown);
     };
 
+    /**
+     * @public
+     * @returns {*}
+     */
+    n.Form.prototype.validate = function () {
+        if (this.$form.attr('novalidate')) {
+            return true;
+        }
+
+
+        var formElements = document.forms[this.formId];
+        var formElementsLength = formElements.length;
+
+        var invalidElements = [];
+
+        for (var i = 0; i < formElementsLength; i++) {
+            var formElement = formElements[i];
+            if (!formElement.willValidate) {
+                continue;
+            }
+
+            if (!formElement.checkValidity()) {
+                invalidElements.push(formElement);
+            }
+        }
+
+        return invalidElements.length === 0 ? true : invalidElements;
+    };
+
 })(QfqNS);

javascript/src/QfqForm.js

@@ -154,6 +154,33 @@ 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
      */
@@ -163,7 +190,7 @@ var QfqNS = QfqNS || {};
         // First, remove all validation states, in case a previous submit has set a validation state, thus we're not
         // stockpiling them.
         this.clearAllValidationStates();
-        this.form.submitTo(this.submitTo);
+        this.submit();
     };
 
     /**
@@ -175,7 +202,7 @@ var QfqNS = QfqNS || {};
             var alert = new n.Alert("You have unsaved changes. Do you want to close?", "warning", "yesnosave");
             var that = this;
             alert.on('alert.save', function () {
-                that.form.submitTo(that.submitTo);
+                that.submit();
             });
             alert.on('alert.ok', function () {
                 window.history.back();
@@ -186,6 +213,15 @@ var QfqNS = QfqNS || {};
         }
     };
 
+    n.QfqForm.prototype.submit = function () {
+        if (!this.checkValidity()) {
+            var alert = new n.Alert("Form is incomplete.", "warning");
+            alert.show();
+            return;
+        }
+        this.form.submitTo(this.submitTo);
+    };
+
     /**
      * @private
      */
@@ -197,7 +233,7 @@ var QfqNS = QfqNS || {};
             var alert = new n.Alert("You have unsaved changes. Do you want to close?", "warning", "yesnosave");
             var that = this;
             alert.on('alert.save', function () {
-                that.form.submitTo(that.submitTo);
+                that.submit();
             });
             alert.on('alert.ok', function () {
                 var anchorTarget = that.getNewButtonTarget();

mockup/personmock.html

@@ -123,7 +123,7 @@
                     </div>
 
                     <div class="col-md-6">
-                        <input id="name" type="text" class="form-control">
+                        <input id="name" name="name" type="text" class="form-control">
                     </div>
 
                 </div>
@@ -134,7 +134,7 @@
                     </div>
 
                     <div class="col-md-6">
-                        <input id="firstname" type="text" class="form-control">
+                        <input id="firstname" name="firstname" type="text" class="form-control">
                     </div>
                 </div>
 
@@ -143,7 +143,7 @@
                         <label for="nameShort" class="control-label">Vorname Kurz</label>
                     </div>
                     <div class="col-md-6">
-                        <input id="nameShort" type="text" class="form-control">
+                        <input id="nameShort" name="shortname" type="text" class="form-control">
                     </div>
 
                     <div class="col-md-4">
@@ -156,7 +156,7 @@
                         <label for="personHandle" class="control-label">Kurzform</label>
                     </div>
                     <div class="col-md-6">
-                        <input id="personHandle" type="text" class="form-control">
+                        <input id="personHandle" name="personhandle" type="text" class="form-control">
                     </div>
 
                     <div class="col-md-4">
@@ -170,7 +170,7 @@
                         <label for="personTitle" class="control-label">Titel</label>
                     </div>
                     <div class="col-md-6">
-                        <select id="personTitle" class="form-control">
+                        <select id="personTitle" class="form-control" name="persontitle">
                             <option></option>
                             <option>Dr.</option>
                             <option>Prof. Dr.</option>
@@ -1013,6 +1013,10 @@
             qfqPage.qfqForm.fileUploader.targetUrl = 'api/' + $(evt.target).val();
         });
 
+        $('#myForm').on('invalid', function () {
+            console.log("Invalid event catched");
+        });
+
         QfqNS.Log.level = 0;
     });
 </script>