带有表单标记的ASP.NET Core - 验证表单onsubmit并阻止提交

时间:2017-12-07 15:46:34

标签: javascript c# asp.net-core-mvc form-submit asp.net-core-2.0

我有一个ASP.NET Core 2.0项目,我在其中使用表单标记进行提交。现在我想在表单提交上添加一些客户端验证。所以我在表单上使用onsubmit标记,如下所示:

<form id="formId" asp-action="ActionName" onsubmit="validationFunction(Event)">

我有这样的功能:

function validationFunction(e) {
    //CheckStuff
    e.preventDefault();
}

现在,当我提交表单时,该功能会被正确触发,但e.preventDefault()不会停止提交。 return false也没有。

如何阻止我的提交完成?

PS。我知道我可以通过单击按钮来处理这个案例,并在完成验证时提交我的表单,但我想知道为什么不在ASP.NET Core中进行上述工作或者我缺少什么?

2 个答案:

答案 0 :(得分:2)

应返回onsubmit属性并return false以阻止提交。

<form id="formId" asp-action="ActionName" onsubmit="return validationFunction(Event)">

答案 1 :(得分:1)

如果你想这样做“正确”,最简单的方法是在前面的课程中设置验证:

public class Movie
{
public int ID { get; set; }

[StringLength(60, MinimumLength = 3)]
[Required]
public string Title { get; set; }

[Display(Name = "Release Date")]
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

[Range(1, 100)]
[DataType(DataType.Currency)]
public decimal Price { get; set; }

[RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]
[Required]
[StringLength(30)]
public string Genre { get; set; }

[RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]
[StringLength(5)]
[Required]
public string Rating { get; set; }
}

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/validation

JavaScript 甚至HTML