Adding form validation

Author: SteveWilkes

_includes/scripts/common.html

@@ -1,7 +1,4 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"
         integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI="
         crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"
-        integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY="
-        crossorigin="anonymous"></script>
 <script src="{{ site.baseurl }}/assets/js/util.min.js"></script>

assets/js/ao.js

@@ -1,14 +1,14 @@
 var Ao = (function () {
     // Helpers
     function doOne(callback) {
-        callback.call(this, this.e);
+        callback.call(this, this.e, 0);
         return this;
     }
 
     function doAll(callback) {
         var elems = this.e;
         for (var i = 0, l = elems.length; i < l; ++i) {
-            callback.call(this, elems[i]);
+            callback.call(this, elems[i], i);
         }
         return this;
     }
@@ -116,6 +116,26 @@
             return this._do(function (e) {
                 e.disabled = true;
             });
+        },
+        after: function (elemOrAoObj) {
+            var originElem = elemOrAoObj instanceof AoObj ? elemOrAoObj.e : elemOrAoObj;
+            return this._do(function (e, i) {
+                var elem = i === 0 ? originElem : originElem.cloneNode();
+                e.parentNode.insertBefore(elem, e.nextSibling);
+            });
+        },
+        on: function (eventTypes, callback) {
+            var events = eventTypes.split(' ');
+            var l = events.length;
+            var that = this;
+            var cxtCallback = function () {
+                callback.call(that);
+            };
+            return this._do(function (e) {
+                for (var i = 0; i < l; ++i) {
+                    e.addEventListener(events[i], cxtCallback);
+                }
+            });
         }
     };
 
@@ -157,17 +177,30 @@
     };
 
     // AoValidator
-    function required() {
-        return Boolean(this.e.value);
-    }
+    var emailMatcher = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    var validators = {
+        required: function () {
+            return Boolean(this.e.value);
+        },
+        email: function () {
+            return validators.required.call(this) && emailMatcher.test(this.e.value.toLowerCase());
+        }
+    };
+    var validatorNames = Object.keys(validators);
+    var validatorsCount = validatorNames.length;
 
     var AoValidator = function (input) {
         AoObj.call(this, input);
-        this._msg = ao(input.nextElementSibling);
+        this.on('blur keyup', this.validate);
+        this._msg = ao(document.createElement('span')).addClass('error-message');
+        this.after(this._msg);
         this._validators = [];
-        var requiredMsg = input.getAttribute('data-val-required');
-        if (Boolean(requiredMsg)) {
-            this._validators.push({ test: required, msg: requiredMsg });
+        for (var i = 0; i < validatorsCount; ++i) {
+            var validatorName = validatorNames[i];
+            var msg = input.getAttribute('data-val-' + validatorName);
+            if (Boolean(msg)) {
+                this._validators.push({ test: validators[validatorName], msg: msg });
+            }
         }
     };
 

assets/js/contact.js

@@ -5,7 +5,6 @@
                 this.name = ao.get('contact-form-name');
                 this.email = ao.get('contact-form-email');
                 this.message = ao.get('contact-form-message');
-                this.submitButton = ao.get('contact-form-submit');
             };
 
             contactForm.prototype.handleSend = function (form) {

assets/js/contact.min.js

@@ -16,21 +16,15 @@ <h1 class="post-title">Contact</h1>
             <input type="text" id="contact-form-name" name="name" class="form-input"
                    placeholder="Your name"
                    data-val="true" data-val-required="Your name is required" />
-            <span class="error-message"
-                  data-valmsg-for="name" data-valmsg-replace="true"></span>
 
             <input type="text" id="contact-form-email" name="email" class="form-input"
                    placeholder="Your email address"
                    data-val="true" data-val-required="Your email is required"
                    data-val-email="That's not a valid email address" />
-            <span class="error-message"
-                  data-valmsg-for="email" data-valmsg-replace="true"></span>
 
             <textarea id="contact-form-message" name="message" class="form-textarea"
                       placeholder="Your message"
                       data-val="true" data-val-required="A message is required"></textarea>
-            <span class="error-message"
-                  data-valmsg-for="message" data-valmsg-replace="true"></span>
 
             <input id="contact-form-submit" type="submit" value="Send" />