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客戶端驗證和附加警報框

回答

相關問題