最近的项目采用了asp.net mvc4。有个需求，需要实现jquery validate的验证消息提示采用弹出框方式。默认的jquery.validate.unobtrusive.js实现中没有这样的功能，只要稍加修改就可以满足我们的需求。

添加onDialog：

1. function onDialog(errmap, errorList) {  
2.         var messages = "";  
3.         $.each(errorList, function (index, value) {  
4.  
5.             messages +=  value.message;  
6.         });  
7.         //测试用
8.   if(messages!=""){
9.         alert(messages);  }
10.     } 

修改validattionInfo:

1. function validationInfo(form, dialog) {  
2.         var $form = $(form),  
3.             result = $form.data(data_validation);  
4.  
5.         if (!result) {  
6.             result = {  
7.                 options: {  // options structure passed to jQuery Validate's validate() method  
8.                     errorClass: "input-validation-error",  
9.                     errorElement: "span",  
10.                     errorPlacement: $.proxy(onError, form),  
11.                     invalidHandler: $.proxy(onErrors, form),  
12.                     messages: {},  
13.                     rules: {},  
14.                     success: $.proxy(onSuccess, form)  
15.                 },  
16.                 attachValidation: function () {  
17.                     $form.validate(this.options);  
18.                 },  
19.                 validate: function () {  // a validation function that is called by unobtrusive Ajax  
20.                     $form.validate();  
21.                     return $form.valid();  
22.                 }  
23.             };  
24.             if (dialog) {  
25.                 result.options.showErrors = $.proxy(onDialog, form);  
26.                 result.options.onfocusout = false;  
27.                 reuslt.options.onkeyup = false;  
28.             }  
29.             $form.data(data_validation, result);  
30.         }  
31.  
32.         return result;  
33.     } 

修改$jQval.unobjtrusive:

1. $jQval.unobtrusive = {  
2.         adapters: [],  
3.  
4.         parseElement: function (element, skipAttach, dialog) {  
5.             /// <summary>  
6.             /// Parses a single HTML element for unobtrusive validation attributes.  
7.             /// </summary>  
8.             /// <param name="element" domElement="true">The HTML element to be parsed.</param>  
9.             /// <param name="skipAttach" type="Boolean">[Optional] true to skip attaching the  
10.             /// validation to the form. If parsing just this single element, you should specify true.  
11.             /// If parsing several elements, you should specify false, and manually attach the validation  
12.             /// to the form when you are finished. The default is false.</param>  
13.             var $element = $(element),  
14.                 form = $element.parents("form")[0],  
15.                 valInfo, rules, messages;  
16.  
17.             if (!form) {  // Cannot do client-side validation without a form  
18.                 return;  
19.             }  
20.             valInfo = validationInfo(form, dialog);  
21.             valInfo.options.rules[element.name] = rules = {};  
22.             valInfo.options.messages[element.name] = messages = {};  
23.  
24.             $.each(this.adapters, function () {  
25.                 var prefix = "data-val-" + this.name,  
26.                     message = $element.attr(prefix),  
27.                     paramValues = {};  
28.  
29.                 if (message !== undefined) {  // Compare against undefined, because an empty message is legal (and falsy)  
30.                     prefix += "-";  
31.  
32.                     $.each(this.params, function () {  
33.                         paramValues[this] = $element.attr(prefix + this);  
34.                     });  
35.  
36.                     this.adapt({  
37.                         element: element,  
38.                         form: form,  
39.                         message: message,  
40.                         params: paramValues,  
41.                         rules: rules,  
42.                         messages: messages  
43.                     });  
44.                 }  
45.             });  
46.  
47.             jQuery.extend(rules, { "__dummy__": true });  
48.  
49.             if (!skipAttach) {  
50.                 valInfo.attachValidation();  
51.             }  
52.         },  
53.  
54.         parse: function (selector) {  
55.             /// <summary>  
56.             /// Parses all the HTML elements in the specified selector. It looks for input elements decorated  
57.             /// with the [data-val=true] attribute value and enables validation according to the data-val-*  
58.             /// attribute values.  
59.             /// </summary>  
60.             /// <param name="selector" type="String">Any valid jQuery selector.</param>  
61.             $(selector).find(":input[data-val=true]").each(function () {  
62.                 $jQval.unobtrusive.parseElement(this, true, false);  
63.             });  
64.  
65.             $("form").each(function () {  
66.                 var info = validationInfo(this, false);  
67.                 if (info) {  
68.                     info.attachValidation();  
69.                 }  
70.             });  
71.         },  
72.         parseDialog: function (selector) {  
73.             /// <summary>  
74.             /// Parses all the HTML elements in the specified selector. It looks for input elements decorated  
75.             /// with the [data-val=true] attribute value and enables validation according to the data-val-*  
76.             /// attribute values.  
77.             /// </summary>  
78.             /// <param name="selector" type="String">Any valid jQuery selector.</param>  
79.             $(selector).find(":input[data-val=true]").each(function () {  
80.                 $jQval.unobtrusive.parseElement(this, true, true);  
81.             });  
82.  
83.             $("form").each(function () {  
84.                 var info = validationInfo(this, true);  
85.                 if (info) {  
86.                     info.attachValidation();  
87.                 }  
88.             });  
89.         }  
90.     }; 

调用方式：

1. var qform = $("#myForm");
2. //默认方式
   • //$.validator.unobtrusive.parse(qform);   
   • //弹出方式
3. $.validator.unobtrusive.parseDialog(qform);  
4. if (qform.valid()) {  
5.                    //提交    }