MVC3 Razor JQuery客户端验证和附加警报框

我被要求创建一个登录表单，当用户输入没有通过验证时，它弹出一个警告框。MVC3 Razor JQuery客户端验证和附加警报框

我有一切使用基于模型验证连线。

例如：

public class LogonViewModel 
    { 
     [Required(ErrorMessage = "User Name is Required")] 
     public string UserName { get; set; } 

     [Required(ErrorMessage = "Password is required")] 
     public string Password { get; set; } 
    }

我页面上的验证摘要：

Html.ValidationSummary()

我想总结在页面上以防万一用户有JavaScript的关闭。但是，如果客户端验证激发，我也想捕获验证事件，并将错误放入警告框中，就像我被问到。

我的表格是...

@Html.ValidationSummary() 
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "loginForm" })) 
    { 
     username: @Html.TextBoxFor(m => m.UserName) <br/> 
     password: @Html.TextBoxFor(m => m.Password) <br/> 
     <input type="submit" value="Login"/> 


    }

一个我尝试的一件事是

<script language="javascript"> 
     $(document).ready(function() { 

      $("#loginForm").validate({ 
       invalidHandler: function (form, validator) { 
        var errors = validator.numberOfInvalids(); 
        if (errors) { 
         alert(errors); 
        } 
       } 
      }); 
     }); 



    </script>

我无法弄清楚如何使这项工作。我只想让正常的验证和错误显示，但有机会做更多。

来源

2012-06-04 John Sobolewski

经过一番搜索：

我发现这个Add InvalidHandler after jQuery validator initialization 导致我这个解决方案：

$(document).ready(function() { 
      $("#loginForm").bind('invalid-form.validate', 
       function (form, validator) { 
        var errors = "Login failed:\r\n"; 

        for (var i = 0; i < validator.errorList.length; i++) { 
         errors = errors + "\r\n\t-" + validator.errorList[i].message;  
        } 

        alert(errors); 


       } 
       ); 
     });

这将运行正常验证和更新验证总结，并设置所有样式，然后让我做了一些额外的事情。

来源

2012-06-05 15:54:35

一个解决方案是修改jquery.validate.unobtrusive.js中的onErrors函数。该功能非常可读。

来源

2012-06-04 21:02:07 Mikael

这个工作对我来说...

var settings = $.data($('form')[0], 'validator').settings; 

if (jQuery.validator) { 
    jQuery.validator.setDefaults({ 
     showErrors: function (errorMap, errorList) { 
      $.extend($.validator.defaults, settings); 
      var message = ''; 
      for (var i = 0; i < errorList.length; i++) { 
       message += errorList[i].message + '\n\n'; 
      } 

      alert(message);//Replace your modal popup here 
     } 
    }); 
}

来源

2014-11-08 09:31:10 Teddy

MVC3 Razor JQuery客户端验证和附加警报框

回答

相关问题