Skip to content

Instantly share code, notes, and snippets.

@khalidabuhakmeh
Created August 5, 2011 19:20
Show Gist options
  • Save khalidabuhakmeh/1128289 to your computer and use it in GitHub Desktop.
Save khalidabuhakmeh/1128289 to your computer and use it in GitHub Desktop.
Fix to jquery.validate.unobtrusive.min.js (now works with password confirmation)
/// <reference path="jquery-1.5.1.js" />
/// <reference path="jquery.validate.js" />
/*!
** Unobtrusive validation support library for jQuery and jQuery Validate
** Copyright (C) Microsoft Corporation. All rights reserved.
*/
/*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 */
/*global document: false, jQuery: false */
(function ($) {
var $jQval = $.validator,
adapters,
data_validation = "unobtrusiveValidation";
function setValidationValues(options, ruleName, value) {
options.rules[ruleName] = value;
if (options.message) {
options.messages[ruleName] = options.message;
}
}
function splitAndTrim(value) {
return value.replace(/^\s+|\s+$/g, "").split(/\s*,\s*/g);
}
function getModelPrefix(fieldName) {
return fieldName.substr(0, fieldName.lastIndexOf(".") + 1);
}
function appendModelPrefix(value, prefix) {
if (value.indexOf("*.") === 0) {
value = value.replace("*.", prefix);
}
return value;
}
function onError(error, inputElement) { // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
container.removeClass("field-validation-valid").addClass("field-validation-error");
error.data("unobtrusiveContainer", container);
if (replace) {
container.empty();
error.removeClass("input-validation-error").appendTo(container);
}
else {
error.hide();
}
}
function onErrors(form, validator) { // 'this' is the form element
var container = $(this).find("[data-valmsg-summary=true]"),
list = container.find("ul");
if (list && list.length && validator.errorList.length) {
list.empty();
container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
$.each(validator.errorList, function () {
$("<li />").html(this.message).appendTo(list);
});
}
}
function onSuccess(error) { // 'this' is the form element
var container = error.data("unobtrusiveContainer"),
replace = $.parseJSON(container.attr("data-valmsg-replace"));
if (container) {
container.addClass("field-validation-valid").removeClass("field-validation-error");
error.removeData("unobtrusiveContainer");
if (replace) {
container.empty();
}
}
}
function validationInfo(form) {
var $form = $(form),
result = $form.data(data_validation);
if (!result) {
result = {
options: { // options structure passed to jQuery Validate's validate() method
errorClass: "input-validation-error",
errorElement: "span",
errorPlacement: $.proxy(onError, form),
invalidHandler: $.proxy(onErrors, form),
messages: {},
rules: {},
success: $.proxy(onSuccess, form)
},
attachValidation: function () {
$form.validate(this.options);
},
validate: function () { // a validation function that is called by unobtrusive Ajax
$form.validate();
return $form.valid();
}
};
$form.data(data_validation, result);
}
return result;
}
$jQval.unobtrusive = {
adapters: [],
parseElement: function (element, skipAttach) {
/// <summary>
/// Parses a single HTML element for unobtrusive validation attributes.
/// </summary>
/// <param name="element" domElement="true">The HTML element to be parsed.</param>
/// <param name="skipAttach" type="Boolean">[Optional] true to skip attaching the
/// validation to the form. If parsing just this single element, you should specify true.
/// If parsing several elements, you should specify false, and manually attach the validation
/// to the form when you are finished. The default is false.</param>
var $element = $(element),
form = $element.parents("form")[0],
valInfo, rules, messages;
if (!form) { // Cannot do client-side validation without a form
return;
}
valInfo = validationInfo(form);
valInfo.options.rules[element.name] = rules = {};
valInfo.options.messages[element.name] = messages = {};
$.each(this.adapters, function () {
var prefix = "data-val-" + this.name,
message = $element.attr(prefix),
paramValues = {};
if (message !== undefined) { // Compare against undefined, because an empty message is legal (and falsy)
prefix += "-";
$.each(this.params, function () {
paramValues[this] = $element.attr(prefix + this);
});
this.adapt({
element: element,
form: form,
message: message,
params: paramValues,
rules: rules,
messages: messages
});
}
});
jQuery.extend(rules, { "__dummy__": true });
if (!skipAttach) {
valInfo.attachValidation();
}
},
parse: function (selector) {
/// <summary>
/// Parses all the HTML elements in the specified selector. It looks for input elements decorated
/// with the [data-val=true] attribute value and enables validation according to the data-val-*
/// attribute values.
/// </summary>
/// <param name="selector" type="String">Any valid jQuery selector.</param>
$(selector).find(":input[data-val=true]").each(function () {
$jQval.unobtrusive.parseElement(this, true);
});
$("form").each(function () {
var info = validationInfo(this);
if (info) {
info.attachValidation();
}
});
}
};
adapters = $jQval.unobtrusive.adapters;
adapters.add = function (adapterName, params, fn) {
/// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation.</summary>
/// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
/// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
/// <param name="params" type="Array" optional="true">[Optional] An array of parameter names (strings) that will
/// be extracted from the data-val-nnnn-mmmm HTML attributes (where nnnn is the adapter name, and
/// mmmm is the parameter name).</param>
/// <param name="fn" type="Function">The function to call, which adapts the values from the HTML
/// attributes into jQuery Validate rules and/or messages.</param>
/// <returns type="jQuery.validator.unobtrusive.adapters" />
if (!fn) { // Called with no params, just a function
fn = params;
params = [];
}
this.push({ name: adapterName, params: params, adapt: fn });
return this;
};
adapters.addBool = function (adapterName, ruleName) {
/// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
/// the jQuery Validate validation rule has no parameter values.</summary>
/// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
/// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
/// <param name="ruleName" type="String" optional="true">[Optional] The name of the jQuery Validate rule. If not provided, the value
/// of adapterName will be used instead.</param>
/// <returns type="jQuery.validator.unobtrusive.adapters" />
return this.add(adapterName, function (options) {
setValidationValues(options, ruleName || adapterName, true);
});
};
adapters.addMinMax = function (adapterName, minRuleName, maxRuleName, minMaxRuleName, minAttribute, maxAttribute) {
/// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
/// the jQuery Validate validation has three potential rules (one for min-only, one for max-only, and
/// one for min-and-max). The HTML parameters are expected to be named -min and -max.</summary>
/// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
/// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
/// <param name="minRuleName" type="String">The name of the jQuery Validate rule to be used when you only
/// have a minimum value.</param>
/// <param name="maxRuleName" type="String">The name of the jQuery Validate rule to be used when you only
/// have a maximum value.</param>
/// <param name="minMaxRuleName" type="String">The name of the jQuery Validate rule to be used when you
/// have both a minimum and maximum value.</param>
/// <param name="minAttribute" type="String" optional="true">[Optional] The name of the HTML attribute that
/// contains the minimum value. The default is "min".</param>
/// <param name="maxAttribute" type="String" optional="true">[Optional] The name of the HTML attribute that
/// contains the maximum value. The default is "max".</param>
/// <returns type="jQuery.validator.unobtrusive.adapters" />
return this.add(adapterName, [minAttribute || "min", maxAttribute || "max"], function (options) {
var min = options.params.min,
max = options.params.max;
if (min && max) {
setValidationValues(options, minMaxRuleName, [min, max]);
}
else if (min) {
setValidationValues(options, minRuleName, min);
}
else if (max) {
setValidationValues(options, maxRuleName, max);
}
});
};
adapters.addSingleVal = function (adapterName, attribute, ruleName) {
/// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
/// the jQuery Validate validation rule has a single value.</summary>
/// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
/// in the data-val-nnnn HTML attribute(where nnnn is the adapter name).</param>
/// <param name="attribute" type="String">[Optional] The name of the HTML attribute that contains the value.
/// The default is "val".</param>
/// <param name="ruleName" type="String" optional="true">[Optional] The name of the jQuery Validate rule. If not provided, the value
/// of adapterName will be used instead.</param>
/// <returns type="jQuery.validator.unobtrusive.adapters" />
return this.add(adapterName, [attribute || "val"], function (options) {
setValidationValues(options, ruleName || adapterName, options.params[attribute]);
});
};
$jQval.addMethod("__dummy__", function (value, element, params) {
return true;
});
$jQval.addMethod("regex", function (value, element, params) {
var match;
if (this.optional(element)) {
return true;
}
match = new RegExp(params).exec(value);
return (match && (match.index === 0) && (match[0].length === value.length));
});
adapters.addSingleVal("accept", "exts").addSingleVal("regex", "pattern");
adapters.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url");
adapters.addMinMax("length", "minlength", "maxlength", "rangelength").addMinMax("range", "min", "max", "range");
adapters.add("equalto", ["other"], function (options) {
var prefix = getModelPrefix(options.element.name),
other = options.params.other,
fullOtherName = appendModelPrefix(other, prefix),
//element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];
element = $(options.form).find(":input[name=" + fullOtherName.replace(".", "\\.") + "]")[0];
setValidationValues(options, "equalTo", element);
});
adapters.add("required", function (options) {
// jQuery Validate equates "required" with "mandatory" for checkbox elements
if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
setValidationValues(options, "required", true);
}
});
adapters.add("remote", ["url", "type", "additionalfields"], function (options) {
var value = {
url: options.params.url,
type: options.params.type || "GET",
data: {}
},
prefix = getModelPrefix(options.element.name);
$.each(splitAndTrim(options.params.additionalfields || options.element.name), function (i, fieldName) {
var paramName = appendModelPrefix(fieldName, prefix);
value.data[paramName] = function () {
return $(options.form).find(":input[name='" + paramName + "']").val();
};
});
setValidationValues(options, "remote", value);
});
$(function () {
$jQval.unobtrusive.parse(document);
});
}(jQuery));
/*!
** Unobtrusive validation support library for jQuery and jQuery Validate
** Copyright (C) Microsoft Corporation. All rights reserved.
*/
(function(f){var k=f.validator,l,c="unobtrusiveValidation";function j(m,o,n){m.rules[o]=n;if(m.message){m.messages[o]=m.message}}function d(m){return m.replace(/^\s+|\s+$/g,"").split(/\s*,\s*/g)}function e(m){return m.substr(0,m.lastIndexOf(".")+1)}function b(n,m){if(n.indexOf("*.")===0){n=n.replace("*.",m)}return n}function g(n,p){var m=f(this).find("[data-valmsg-for='"+p[0].name+"']"),o=f.parseJSON(m.attr("data-valmsg-replace"))!==false;m.removeClass("field-validation-valid").addClass("field-validation-error");n.data("unobtrusiveContainer",m);if(o){m.empty();n.removeClass("input-validation-error").appendTo(m)}else{n.hide()}}function i(o,n){var m=f(this).find("[data-valmsg-summary=true]"),p=m.find("ul");if(p&&p.length&&n.errorList.length){p.empty();m.addClass("validation-summary-errors").removeClass("validation-summary-valid");f.each(n.errorList,function(){f("<li />").html(this.message).appendTo(p)})}}function h(n){var m=n.data("unobtrusiveContainer"),o=f.parseJSON(m.attr("data-valmsg-replace"));if(m){m.addClass("field-validation-valid").removeClass("field-validation-error");n.removeData("unobtrusiveContainer");if(o){m.empty()}}}function a(o){var n=f(o),m=n.data(c);if(!m){m={options:{errorClass:"input-validation-error",errorElement:"span",errorPlacement:f.proxy(g,o),invalidHandler:f.proxy(i,o),messages:{},rules:{},success:f.proxy(h,o)},attachValidation:function(){n.validate(this.options)},validate:function(){n.validate();return n.valid()}};n.data(c,m)}return m}k.unobtrusive={adapters:[],parseElement:function(p,m){var o=f(p),r=o.parents("form")[0],n,s,q;if(!r){return}n=a(r);n.options.rules[p.name]=s={};n.options.messages[p.name]=q={};f.each(this.adapters,function(){var u="data-val-"+this.name,t=o.attr(u),v={};if(t!==undefined){u+="-";f.each(this.params,function(){v[this]=o.attr(u+this)});this.adapt({element:p,form:r,message:t,params:v,rules:s,messages:q})}});jQuery.extend(s,{__dummy__:true});if(!m){n.attachValidation()}},parse:function(m){f(m).find(":input[data-val=true]").each(function(){k.unobtrusive.parseElement(this,true)});f("form").each(function(){var n=a(this);if(n){n.attachValidation()}})}};l=k.unobtrusive.adapters;l.add=function(o,n,m){if(!m){m=n;n=[]}this.push({name:o,params:n,adapt:m});return this};l.addBool=function(n,m){return this.add(n,function(o){j(o,m||n,true)})};l.addMinMax=function(r,q,o,n,m,p){return this.add(r,[m||"min",p||"max"],function(t){var u=t.params.min,s=t.params.max;if(u&&s){j(t,n,[u,s])}else{if(u){j(t,q,u)}else{if(s){j(t,o,s)}}}})};l.addSingleVal=function(o,m,n){return this.add(o,[m||"val"],function(p){j(p,n||o,p.params[m])})};k.addMethod("__dummy__",function(n,m,o){return true});k.addMethod("regex",function(o,n,p){var m;if(this.optional(n)){return true}m=new RegExp(p).exec(o);return(m&&(m.index===0)&&(m[0].length===o.length))});l.addSingleVal("accept","exts").addSingleVal("regex","pattern");l.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url");l.addMinMax("length","minlength","maxlength","rangelength").addMinMax("range","min","max","range");l.add("equalto",["other"],function(n){var p=e(n.element.name),m=n.params.other,q=b(m,p),o=f(n.form).find(":input[name="+q.replace(".","\\.")+"]")[0];j(n,"equalTo",o)});l.add("required",function(m){if(m.element.tagName.toUpperCase()!=="INPUT"||m.element.type.toUpperCase()!=="CHECKBOX"){j(m,"required",true)}});l.add("remote",["url","type","additionalfields"],function(m){var o={url:m.params.url,type:m.params.type||"GET",data:{}},n=e(m.element.name);f.each(d(m.params.additionalfields||m.element.name),function(p,r){var q=b(r,n);o.data[q]=function(){return f(m.form).find(":input[name='"+q+"']").val()}});j(m,"remote",o)});f(function(){k.unobtrusive.parse(document)})}(jQuery));
@khalidabuhakmeh
Copy link
Author

Fix in relation to this StackOverflow question that I found very helpful. If you can upvote it, please do. http://stackoverflow.com/questions/6818516/compare-password-attribute

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment