https://binoco.in/Content/jquery.validate.mvc.js

1/*
2 *  Project: MVC Validation Framework
3 *  Description: This plugin will convert client side validation elements to bootstrap tooltips
4 *  Author: Ahmad Aqrabawi, Mohamed Aljaber
5 *  License: MIT
6 */
7
8// the semi-colon before function invocation is a safety net against concatenated
9// scripts and/or other plugins which may not be closed properly.
10; (function ($, window, document, undefined) {
11
12    // undefined is used here as the undefined global variable in ECMAScript 3 is
13    // mutable (ie. it can be changed by someone else). undefined isn't really being
14    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
15    // can no longer be modified.
16
17    // window and document are passed through as local variable rather than global
18    // as this (slightly) quickens the resolution process and can be more efficiently
19    // minified (especially when both are regularly referenced in your plugin).
20
21    // Create the defaults once
22    var pluginName = "tooltipValidation";
23    var defaults = {
24    };
25
26    // The actual plugin constructor
27    function Plugin(element, options) {
28        this.element = element;
29        // jQuery has an extend method which merges the contents of two or
30        // more objects, storing the result in the first object. The first object
31        // is generally empty as we don't want to alter the default options for
32        // future instances of the plugin
33        this.options = $.extend({}, defaults, options);
34        this._defaults = defaults;
35        this._name = pluginName;
36        this.init();
37    }
38
39    Plugin.prototype = {
40
41        init: function () {
42
43            // Place initialization logic here
44            // You already have access to the DOM element and
45            // the options via the instance, e.g. this.element
46            // and this.options
47            // you can add more functions like the one below and
48            // call them like so: this.yourOtherFunction(this.element, this.options).
49
50            var elem = $(this.element),
51                name = elem.attr("name"),
52                defaultBorderCss = elem.css('border'),
53                tooltipPlacement = this.options.placement;
54
55            if (name) {
56
57                var errValElem = $('span[data-valmsg-for="' + name + '"]');
58                errValElem.hide();
59
60                function onDOMSubtreeModified(errValElem) {
61
62                    errValElem.bind("DOMSubtreeModified", function () {
63
64                        elem.tooltip("destroy");
65                        elem.siblings("div.tooltip").remove();
66
67                        var isTooltipPluginAttached = elem.data("plugin_tooltipValidation");
68                        if (!isTooltipPluginAttached) {
69                            elem.tooltip({
70                                'title': errValElem.text(),
71                                'animation': 'true',
72                                'placement': tooltipPlacement || 'top',
73                                'trigger': 'focus'
74                            });
75                        }
76
77                        if (errValElem.hasClass("field-validation-error")) {
78                            elem.css('border', '1px solid red');
79                        }
80                        else {
81                            elem.css('border', defaultBorderCss);
82                            elem.tooltip('destroy');
83                            elem.siblings("div.tooltip").remove();
84                        }
85
86                    });
87                };
88                function showTooltipOfError(event) {
89
90                    var inputField = event.currentTarget;
91                    if (errValElem.hasClass("field-validation-error") || errValElem.hasClass("field-error")) {
92
93                        $(inputField).siblings("div.tooltip").remove();
94
95                        $(inputField).tooltip({
96                            'title': $(errValElem).text(),
97                            'animation': 'true',
98                            'placement': tooltipPlacement || 'top',
99                            'trigger': 'focus'
100                        });
101                        $(inputField).tooltip('show')
102                        $(".tooltip").addClass("error");
103                    }
104                };
105
106                if (elem.is('select')) { //Handle tooltip on input type = select (DropdownList)
107                    elem.on("focus mouseenter", function (event) {
108                        showTooltipOfError(event);
109                    });
110                    elem.on("mouseleave", function (event) {
111                        var inputField = event.currentTarget;
112                        $(inputField).tooltip('hide');
113                    });
114                    onDOMSubtreeModified(errValElem);
115                }
116                else if (elem.attr('type') == 'date') { //Handle if input type = date
117                    elem.on("focus mouseenter", function (event) {
118                        showTooltipOfError(event);
119                    });
120                    elem.on("mouseleave", function (event) {
121                        var inputField = event.currentTarget;
122                        $(inputField).tooltip('hide');
123                    });
124                    elem.on("change", function (event) {
125                        var inputField = event.currentTarget;
126                        if ($(inputField).val() != "") {
127                            elem.css('border', defaultBorderCss);
128                            elem.tooltip('destroy');
129                            elem.siblings("div.tooltip").remove();
130                        }
131                        else
132                            elem.css('border', '1px solid red');
133                    });
134                    onDOMSubtreeModified(errValElem);
135                }
136                else if (elem.attr('type') == 'file') {
137                    elem.on("focus mouseenter", function (event) {
138                        showTooltipOfError(event);
139                    });
140                    elem.on("mouseleave", function (event) {
141                        var inputField = event.currentTarget;
142                        $(inputField).tooltip('hide');
143                    });
144                    onDOMSubtreeModified(errValElem);
145                }
146                else {
147                    elem.on("focus", function (event) {
148                        showTooltipOfError(event);
149                    });
150                    onDOMSubtreeModified(errValElem);
151                }
152            }
153        }
154    };
155
156    // A really lightweight plugin wrapper around the constructor,
157    // preventing against multiple instantiations
158    $.fn[pluginName] = function (options) {
159        return this.each(function () {
160            if (!$.data(this, "plugin_" + pluginName)) {
161                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
162            }
163        });
164    };
165
166})(jQuery, window, document);