asp.net mvc4 jquery validate 弹出框提示

最近的项目采用了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(thistruefalse);  
  63.             });  
  64.  
  65.             $("form").each(function () {  
  66.                 var info = validationInfo(thisfalse);  
  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(thistruetrue);  
  81.             });  
  82.  
  83.             $("form").each(function () {  
  84.                 var info = validationInfo(thistrue);  
  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.                    //提交    } 

 

你可能感兴趣的:(jquery,mvc,ASP/ASP.NET)