PageRenderTime 38ms CodeModel.GetById 19ms app.highlight 15ms RepoModel.GetById 1ms app.codeStats 0ms

/MvcMusicStore/Scripts/jquery.validate.unobtrusive.js

#
JavaScript | 319 lines | 210 code | 45 blank | 64 comment | 33 complexity | ee139f97ca2b67a45e43f377ccd02a3c MD5 | raw file
  1/// <reference path="jquery-1.5.1.js" />
  2/// <reference path="jquery.validate.js" />
  3
  4/*!
  5** Unobtrusive validation support library for jQuery and jQuery Validate
  6** Copyright (C) Microsoft Corporation. All rights reserved.
  7*/
  8
  9/*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: false */
 10/*global document: false, jQuery: false */
 11
 12(function ($) {
 13    var $jQval = $.validator,
 14        adapters,
 15        data_validation = "unobtrusiveValidation";
 16
 17    function setValidationValues(options, ruleName, value) {
 18        options.rules[ruleName] = value;
 19        if (options.message) {
 20            options.messages[ruleName] = options.message;
 21        }
 22    }
 23
 24    function splitAndTrim(value) {
 25        return value.replace(/^\s+|\s+$/g, "").split(/\s*,\s*/g);
 26    }
 27
 28    function getModelPrefix(fieldName) {
 29        return fieldName.substr(0, fieldName.lastIndexOf(".") + 1);
 30    }
 31
 32    function appendModelPrefix(value, prefix) {
 33        if (value.indexOf("*.") === 0) {
 34            value = value.replace("*.", prefix);
 35        }
 36        return value;
 37    }
 38
 39    function onError(error, inputElement) {  // 'this' is the form element
 40        var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
 41            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
 42
 43        container.removeClass("field-validation-valid").addClass("field-validation-error");
 44        error.data("unobtrusiveContainer", container);
 45
 46        if (replace) {
 47            container.empty();
 48            error.removeClass("input-validation-error").appendTo(container);
 49        }
 50        else {
 51            error.hide();
 52        }
 53    }
 54
 55    function onErrors(form, validator) {  // 'this' is the form element
 56        var container = $(this).find("[data-valmsg-summary=true]"),
 57            list = container.find("ul");
 58
 59        if (list && list.length && validator.errorList.length) {
 60            list.empty();
 61            container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
 62
 63            $.each(validator.errorList, function () {
 64                $("<li />").html(this.message).appendTo(list);
 65            });
 66        }
 67    }
 68
 69    function onSuccess(error) {  // 'this' is the form element
 70        var container = error.data("unobtrusiveContainer"),
 71            replace = $.parseJSON(container.attr("data-valmsg-replace"));
 72
 73        if (container) {
 74            container.addClass("field-validation-valid").removeClass("field-validation-error");
 75            error.removeData("unobtrusiveContainer");
 76
 77            if (replace) {
 78                container.empty();
 79            }
 80        }
 81    }
 82
 83    function validationInfo(form) {
 84        var $form = $(form),
 85            result = $form.data(data_validation);
 86
 87        if (!result) {
 88            result = {
 89                options: {  // options structure passed to jQuery Validate's validate() method
 90                    errorClass: "input-validation-error",
 91                    errorElement: "span",
 92                    errorPlacement: $.proxy(onError, form),
 93                    invalidHandler: $.proxy(onErrors, form),
 94                    messages: {},
 95                    rules: {},
 96                    success: $.proxy(onSuccess, form)
 97                },
 98                attachValidation: function () {
 99                    $form.validate(this.options);
100                },
101                validate: function () {  // a validation function that is called by unobtrusive Ajax
102                    $form.validate();
103                    return $form.valid();
104                }
105            };
106            $form.data(data_validation, result);
107        }
108
109        return result;
110    }
111
112    $jQval.unobtrusive = {
113        adapters: [],
114
115        parseElement: function (element, skipAttach) {
116            /// <summary>
117            /// Parses a single HTML element for unobtrusive validation attributes.
118            /// </summary>
119            /// <param name="element" domElement="true">The HTML element to be parsed.</param>
120            /// <param name="skipAttach" type="Boolean">[Optional] true to skip attaching the
121            /// validation to the form. If parsing just this single element, you should specify true.
122            /// If parsing several elements, you should specify false, and manually attach the validation
123            /// to the form when you are finished. The default is false.</param>
124            var $element = $(element),
125                form = $element.parents("form")[0],
126                valInfo, rules, messages;
127
128            if (!form) {  // Cannot do client-side validation without a form
129                return;
130            }
131
132            valInfo = validationInfo(form);
133            valInfo.options.rules[element.name] = rules = {};
134            valInfo.options.messages[element.name] = messages = {};
135
136            $.each(this.adapters, function () {
137                var prefix = "data-val-" + this.name,
138                    message = $element.attr(prefix),
139                    paramValues = {};
140
141                if (message !== undefined) {  // Compare against undefined, because an empty message is legal (and falsy)
142                    prefix += "-";
143
144                    $.each(this.params, function () {
145                        paramValues[this] = $element.attr(prefix + this);
146                    });
147
148                    this.adapt({
149                        element: element,
150                        form: form,
151                        message: message,
152                        params: paramValues,
153                        rules: rules,
154                        messages: messages
155                    });
156                }
157            });
158
159            jQuery.extend(rules, { "__dummy__": true });
160
161            if (!skipAttach) {
162                valInfo.attachValidation();
163            }
164        },
165
166        parse: function (selector) {
167            /// <summary>
168            /// Parses all the HTML elements in the specified selector. It looks for input elements decorated
169            /// with the [data-val=true] attribute value and enables validation according to the data-val-*
170            /// attribute values.
171            /// </summary>
172            /// <param name="selector" type="String">Any valid jQuery selector.</param>
173            $(selector).find(":input[data-val=true]").each(function () {
174                $jQval.unobtrusive.parseElement(this, true);
175            });
176
177            $("form").each(function () {
178                var info = validationInfo(this);
179                if (info) {
180                    info.attachValidation();
181                }
182            });
183        }
184    };
185
186    adapters = $jQval.unobtrusive.adapters;
187
188    adapters.add = function (adapterName, params, fn) {
189        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation.</summary>
190        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
191        /// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
192        /// <param name="params" type="Array" optional="true">[Optional] An array of parameter names (strings) that will
193        /// be extracted from the data-val-nnnn-mmmm HTML attributes (where nnnn is the adapter name, and
194        /// mmmm is the parameter name).</param>
195        /// <param name="fn" type="Function">The function to call, which adapts the values from the HTML
196        /// attributes into jQuery Validate rules and/or messages.</param>
197        /// <returns type="jQuery.validator.unobtrusive.adapters" />
198        if (!fn) {  // Called with no params, just a function
199            fn = params;
200            params = [];
201        }
202        this.push({ name: adapterName, params: params, adapt: fn });
203        return this;
204    };
205
206    adapters.addBool = function (adapterName, ruleName) {
207        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
208        /// the jQuery Validate validation rule has no parameter values.</summary>
209        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
210        /// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
211        /// <param name="ruleName" type="String" optional="true">[Optional] The name of the jQuery Validate rule. If not provided, the value
212        /// of adapterName will be used instead.</param>
213        /// <returns type="jQuery.validator.unobtrusive.adapters" />
214        return this.add(adapterName, function (options) {
215            setValidationValues(options, ruleName || adapterName, true);
216        });
217    };
218
219    adapters.addMinMax = function (adapterName, minRuleName, maxRuleName, minMaxRuleName, minAttribute, maxAttribute) {
220        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
221        /// the jQuery Validate validation has three potential rules (one for min-only, one for max-only, and
222        /// one for min-and-max). The HTML parameters are expected to be named -min and -max.</summary>
223        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
224        /// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
225        /// <param name="minRuleName" type="String">The name of the jQuery Validate rule to be used when you only
226        /// have a minimum value.</param>
227        /// <param name="maxRuleName" type="String">The name of the jQuery Validate rule to be used when you only
228        /// have a maximum value.</param>
229        /// <param name="minMaxRuleName" type="String">The name of the jQuery Validate rule to be used when you
230        /// have both a minimum and maximum value.</param>
231        /// <param name="minAttribute" type="String" optional="true">[Optional] The name of the HTML attribute that
232        /// contains the minimum value. The default is "min".</param>
233        /// <param name="maxAttribute" type="String" optional="true">[Optional] The name of the HTML attribute that
234        /// contains the maximum value. The default is "max".</param>
235        /// <returns type="jQuery.validator.unobtrusive.adapters" />
236        return this.add(adapterName, [minAttribute || "min", maxAttribute || "max"], function (options) {
237            var min = options.params.min,
238                max = options.params.max;
239
240            if (min && max) {
241                setValidationValues(options, minMaxRuleName, [min, max]);
242            }
243            else if (min) {
244                setValidationValues(options, minRuleName, min);
245            }
246            else if (max) {
247                setValidationValues(options, maxRuleName, max);
248            }
249        });
250    };
251
252    adapters.addSingleVal = function (adapterName, attribute, ruleName) {
253        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
254        /// the jQuery Validate validation rule has a single value.</summary>
255        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
256        /// in the data-val-nnnn HTML attribute(where nnnn is the adapter name).</param>
257        /// <param name="attribute" type="String">[Optional] The name of the HTML attribute that contains the value.
258        /// The default is "val".</param>
259        /// <param name="ruleName" type="String" optional="true">[Optional] The name of the jQuery Validate rule. If not provided, the value
260        /// of adapterName will be used instead.</param>
261        /// <returns type="jQuery.validator.unobtrusive.adapters" />
262        return this.add(adapterName, [attribute || "val"], function (options) {
263            setValidationValues(options, ruleName || adapterName, options.params[attribute]);
264        });
265    };
266
267    $jQval.addMethod("__dummy__", function (value, element, params) {
268        return true;
269    });
270
271    $jQval.addMethod("regex", function (value, element, params) {
272        var match;
273        if (this.optional(element)) {
274            return true;
275        }
276
277        match = new RegExp(params).exec(value);
278        return (match && (match.index === 0) && (match[0].length === value.length));
279    });
280
281    adapters.addSingleVal("accept", "exts").addSingleVal("regex", "pattern");
282    adapters.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url");
283    adapters.addMinMax("length", "minlength", "maxlength", "rangelength").addMinMax("range", "min", "max", "range");
284    adapters.add("equalto", ["other"], function (options) {
285        var prefix = getModelPrefix(options.element.name),
286            other = options.params.other,
287            fullOtherName = appendModelPrefix(other, prefix),
288            element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];
289
290        setValidationValues(options, "equalTo", element);
291    });
292    adapters.add("required", function (options) {
293        // jQuery Validate equates "required" with "mandatory" for checkbox elements
294        if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
295            setValidationValues(options, "required", true);
296        }
297    });
298    adapters.add("remote", ["url", "type", "additionalfields"], function (options) {
299        var value = {
300            url: options.params.url,
301            type: options.params.type || "GET",
302            data: {}
303        },
304            prefix = getModelPrefix(options.element.name);
305
306        $.each(splitAndTrim(options.params.additionalfields || options.element.name), function (i, fieldName) {
307            var paramName = appendModelPrefix(fieldName, prefix);
308            value.data[paramName] = function () {
309                return $(options.form).find(":input[name='" + paramName + "']").val();
310            };
311        });
312
313        setValidationValues(options, "remote", value);
314    });
315
316    $(function () {
317        $jQval.unobtrusive.parse(document);
318    });
319}(jQuery));