comparison Agendas/trunk/src/Agendas.Web/Scripts/jquery.validate.unobtrusive.js @ 10:c62b77fc33f4

website inicial
author nelo@MTEySS.neluz.int
date Sun, 13 Mar 2011 18:51:06 -0300
parents
children
comparison
equal deleted inserted replaced
9:c90492faf268 10:c62b77fc33f4
1 /// <reference path="jquery-1.4.4.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));