Mercurial > altnet-hispano
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)); |