asp.net mvc4 jquery validate 彈出框提示

最近的項目採用了asp.net mvc4。有個需求，需要實現jquery validate的驗證消息提示採用彈出框方式。默認的jquery.validate.unobtrusive.js實現中沒有這樣的功能，只要稍加修改就可以滿足我們的需求。

添加onDialog：

function onDialog(errmap, errorList) {
        var messages = "";
        $.each(errorList, function (index, value) {

            messages +=  value.message;
        });
        //測試用
        if(messages!=""){
        alert(messages);  }
    }

修改validattionInfo:

function validationInfo(form, dialog) {
        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();
                }
            };
            if (dialog) {
                result.options.showErrors = $.proxy(onDialog, form);
                result.options.onfocusout = false;
                reuslt.options.onkeyup = false;
            }
            $form.data(data_validation, result);
        }

        return result;
    }

修改$jQval.unobjtrusive:

$jQval.unobtrusive = {
        adapters: [],

        parseElement: function (element, skipAttach, dialog) {
            /// <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, dialog);
            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, false);
            });

            $("form").each(function () {
                var info = validationInfo(this, false);
                if (info) {
                    info.attachValidation();
                }
            });
        },
        parseDialog: 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, true);
            });

            $("form").each(function () {
                var info = validationInfo(this, true);
                if (info) {
                    info.attachValidation();
                }
            });
        }
    };

調用方式：

var qform = $("#myForm");
//默認方式//$.validator.unobtrusive.parse(qform);   //彈出方式
$.validator.unobtrusive.parseDialog(qform);
if (qform.valid()) {
                   //提交    }