/// /// /*! ** 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; } //2014.05.28 Add with Peter begin function CPos(left, top) { this.left = left; this.top = top; } function GetObjPos(ATarget) { var target = ATarget; var pos = new CPos(target.offsetLeft, target.offsetTop); var target = target.offsetParent; while (target) { pos.left += target.offsetLeft; pos.top += target.offsetTop; target = target.offsetParent } return pos; } //2014.05.28 Add with Peter end 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); //2014.05.28 Add with Peter var pos = GetObjPos(inputElement[0]); if (error.text().length > 0) { if ($("[popupfor='" + inputElement[0].name + "']").length == 0) { $(document.body).append("
" + error.text() + "
"); } else { $("[popupfor='" + inputElement[0].name + "']").contents().filter(function () { return this.nodeType == 3; }).replaceWith(error.text()); } $("div[popupfor='" + inputElement[0].name + "']").show(); } else { $("div[popupfor='" + inputElement[0].name + "']").hide(); } //End 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 () { $("
  • ").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) { /// /// Parses a single HTML element for unobtrusive validation attributes. /// /// The HTML element to be parsed. /// [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. 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) { /// /// 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. /// /// Any valid jQuery selector. $(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) { /// Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation. /// 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). /// [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). /// The function to call, which adapts the values from the HTML /// attributes into jQuery Validate rules and/or messages. /// 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) { /// Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where /// the jQuery Validate validation rule has no parameter values. /// 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). /// [Optional] The name of the jQuery Validate rule. If not provided, the value /// of adapterName will be used instead. /// return this.add(adapterName, function (options) { setValidationValues(options, ruleName || adapterName, true); }); }; adapters.addMinMax = function (adapterName, minRuleName, maxRuleName, minMaxRuleName, minAttribute, maxAttribute) { /// 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. /// 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). /// The name of the jQuery Validate rule to be used when you only /// have a minimum value. /// The name of the jQuery Validate rule to be used when you only /// have a maximum value. /// The name of the jQuery Validate rule to be used when you /// have both a minimum and maximum value. /// [Optional] The name of the HTML attribute that /// contains the minimum value. The default is "min". /// [Optional] The name of the HTML attribute that /// contains the maximum value. The default is "max". /// 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) { /// Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where /// the jQuery Validate validation rule has a single value. /// 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). /// [Optional] The name of the HTML attribute that contains the value. /// The default is "val". /// [Optional] The name of the jQuery Validate rule. If not provided, the value /// of adapterName will be used instead. /// 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]; 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));