HTML5 Validation Module

gistfile1.js

/*jslint devel: true */
/*jslint browser: true, nomen: true */
/*global jQuery, cf*/
(function IIFE($, cf) {
    "use strict";
 
    cf.FormValidation = function formValidation(formSelectors) {
        var self = this;
 
        function html5ValidationSupported() {
 
            // Thanks to Modernizr for this.
            // This is mostly a copy with a few changes :
            // Based on: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/forms/validation.js
            // - Jamie
 
            var form, invalidFired, input;
            invalidFired = false;
            form = document.createElement("form");
 
            if ((form.checkValidity === undefined) || (form.addEventListener === undefined)) {
                return false;
            }
 
            if (form.hasOwnProperty("reportValidity")) {
                return true;
            }
 
            form.addEventListener("submit", function submitEventHandler(evt) {
                evt.preventDefault();
                evt.stopPropagation();
            }, false);
 
            form.innerHTML = "<input name=\"valTest\" required><button></button>";
 
            input = form.getElementsByTagName("input")[0];
 
            input.addEventListener("invalid", function invalidFieldHandler(evt) {
                invalidFired = true;
                evt.preventDefault();
                evt.stopPropagation();
            }, false);
 
            form.getElementsByTagName("button")[0].click();
 
            return invalidFired;
        }
 
        function getFieldsToValidate() {
            return $(formSelectors)
                .find("input, textarea, select")
                .filter(function filterFieldsToValidate(index, item) {
                    var $this = $(item);
                    return $this.attr("required") === "required" || $this.attr("type") === "email" || $this.attr("pattern") !== undefined;
                });
        }
 
        /* Events */
        function invalidEventHandler(evt) {
            var $this, valmes, selector, message;
            evt.preventDefault();
            $this = $(evt.currentTarget);
            $this.addClass("invalidField");
            message = $this.data("message");
 
            if (message !== undefined && message.length > 0) {
                evt.currentTarget.setCustomValidity(message);
            }
            selector = $this.hasClass("cfui-dropdown") ? $this.parent() : $this;
 
            if (selector.find("+.field-validation-error").length === 0) {
                valmes = evt.currentTarget.validationMessage;
                selector.after(function () {
                    return "<span class=\"field-validation-error\">" + valmes + "</span>";
                });
            }
        }
 
        function blurEventHandler(evt) {
            var $this, selector;
            $this = $(evt.currentTarget);
            selector = $this.hasClass("cfui-dropdown") ? $this.parent() : $this;
            $this.removeClass("invalidField");
            selector.find("+.field-validation-error").remove();
 
            evt.currentTarget.setCustomValidity("");
            evt.currentTarget.checkValidity();
        }
 
        function submitEventHandler(evt) {
            evt.preventDefault();
            var $allRequired = getFieldsToValidate();
 
            $.each($allRequired, function checkValidityOfField(index, item) {
                item.checkValidity();
            });
 
            // Hide this list of errors because it gets in the way on tablet devices.
            $(".errors").hide();
        }
 
        function attachFormFieldEvent(index, item) {
            $(item).on("invalid", invalidEventHandler);
            $(item).on("blur", blurEventHandler);
        }
 
        self.init = function initialise() {
            var $allRequired;
            $allRequired = getFieldsToValidate();
 
            if (!html5ValidationSupported()) {
                // This is a hack for browsers not triggering the invalid event.
                $(formSelectors).on("submit", submitEventHandler);
            }
 
            $.each($allRequired, attachFormFieldEvent);
            return self;
        };
 
        return self.init();
    };
}(window.jQuery, window.__cf));