表单无效时调用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，以及如何恢复错误消息。

[只有在表单有效的情况下才能激活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！

只需使用'@ 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选项，因为这是一个错误（验证错误）！

我还在寻找更好的答案！

您不需要自己添加错误消息。只需使用Razor帮助器方法'@ Html.ValidationMethodFor（v => v.property）'。内置的库为你做了其余的事 – Liam

我认为这实际上是一个很好的解决方案。我已经更新了我的答案，但如果您想了解如何使用我们首先看到的方法来完成。 –

@Liam，'@ Html.ValidationMethodFor'返回一个错误''IHtmlHelper '不包含'ValidationMethodFor'的定义。 –

表单无效时调用javascript函数

相关推荐