Question

我被要求创建一个登录表单，当用户输入未通过验证时，它会弹出一个警告框。

我使用基于模型的验证连接所有内容。

例如：

 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>

我无法弄清楚如何使这项工作。我只想允许正常验证并显示错误，但有机会再做一点。

Answer 1

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

Answer 2

经过多次搜索：

我找到了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);


                }
                );
        });

这将运行正常验证并更新验证摘要并设置所有样式，然后允许我做更多的后续事项。

Answer 3

这为我工作......

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
        }
    });
}

MVC3 Razor JQuery客户端验证带有一个额外的警告框

3 个答案: