表單無效時調用javascript函數

我有PHP（Laravel）和Python（Django）的Web框架經驗。但我迷失在C＃和ASP.NET！表單無效時調用javascript函數

我想使ASP.NET核心和C＃的登錄頁面。使用一個例子，我有一個登錄表單，用戶名和密碼輸入字段：

<div asp-validation-summary="None" class="text-danger"></div> 
<label asp-for="Username"></label> 
<input asp-for="Username" class="form-control" /> 
<span asp-validation-for="Username" class="text-danger"></span> 

<label asp-for="Password"></label> 
<input asp-for="Password" class="form-control" /> 
<span asp-validation-for="Password" class="text-danger"></span>

，並在我的視圖模型：

[Required(ErrorMessage = "** Localized error message **")] 
[Display(Name = "Username:", Prompt = "Username")] 
public string Username { get; set; } 

[Required(ErrorMessage = "** Another localized error message **")] 
[DataType(DataType.Password)] 
[Display(Name = "Password:", Prompt = "Password")] 
public string Password { get; set; }

一切正常，OK！如果我沒有在表單上輸入用戶名和/或密碼，則本地化的錯誤信息顯示正確。但是，如果我提供一個無效的用戶名/密碼，一般性錯誤（與ul，李）出現在窗體的頂部。這沒關係，但我喜歡在地方顯示toastr，如：

toastr.error(errorMessageOfInvalidLogin);

我如何檢查形式是在客戶端是否有效？我已經包括了toastr，我可以打電話'手動'。但我沒有任何意識如何僅當表單無效時才調用此javascript，以及如何恢復錯誤消息。

來源

2016-09-26 Roberto Correia

[只有在表單有效的情況下才能激活jQuery函數]的可能重複（http://stackoverflow.com/questions/5052315/how-to-fire-jquery-function-only-if-form-is-valid ） – Liam

如果您需要在剃刀來獲取值：

您可以刪除驗證摘要標籤：

@*<div asp-validation-summary="All" class="text-danger"></div>*@

渲染這種形式中：

@if (ViewData.ModelState.Any(x => x.Key == string.Empty)) 
       { 
        var errors = ViewData.ModelState[string.Empty].Errors.Select(e => e.ErrorMessage).Aggregate("", (current, error) => current + error); 
        <input type="hidden" id="error" value="@errors" /> 
       }

在腳本部分：

<script> 

$(function() { 
      var error = $("#error").val(); 
      if (error != undefined) { 
       $.toaster({ message: error, title: 'Error', priority: 'danger' }); 
      } 
     }) 

</script>

想看看？ Click here！

來源

2016-09-26 20:20:18

只需使用'@ Html.ValidationMessageFor（v => v.property）'。而已。當所有這些都是爲您開箱即用的時候，寫出所有這些都是爲了重新發明輪子。 – Liam

不是最好的選擇，但我有以下改動解決：

在CSS，把下面的內容（隱藏表格）：

.validation-summary-erros { 
    display: none; 
}

上Login.cshtml（請致電toastr爲每個錯誤）：

<script type="text/javascript"> 
    $(".validation-summary-erros ul li") 
    .each(function() { 
     toastr.error($(this).text()); 
    }); 
</script>

我還有其他的選擇，如：

創建一個自定義TagHelper：對此太多工作。
在控制器上，傳遞一個帶錯誤的變量來查看：works，但我更喜歡一個AddModelError選項，因爲這是一個錯誤（驗證錯誤）！

我還在尋找更好的答案！

來源

2016-09-27 13:59:45

您不需要自己添加錯誤消息。只需使用Razor幫助器方法'@ Html.ValidationMethodFor（v => v.property）'。內置的庫爲你做了其餘的事 – Liam

我認爲這實際上是一個很好的解決方案。我已經更新了我的答案，但如果您想了解如何使用我們首先看到的方法來完成。 –

@Liam，'@ Html.ValidationMethodFor'返回一個錯誤''IHtmlHelper '不包含'ValidationMethodFor'的定義。 –

表單無效時調用javascript函數

回答

相關問題