asp.net-mvc - 基于验证禁用表单提交

Question

我正在学习 ASP.NET Core (v 2.0)。有一个带有几个输入文本框和一个提交按钮的表单。我只想允许用户提交有效的表单，因此当表单不完整时，我希望禁用提交按钮。

有没有办法使用 ASP.NET Core 轻松做到这一点model validation ?

谢谢。

Answer 1

ASP.NET MVC 中没有任何内置功能可以自动为您执行此操作。您询问的 UI 模式需要 JavaScript 编码。

您可以下载并引用验证库，例如 jQuery Validation Plugin .然后在您的页面中编写一些 JavaScript 以检查表单在 blur 上是否有效。通过检查 $("#myForm").valid() 来查看每个表单输入的信息, 并且只有在表单有效时才启用提交按钮。

有关示例，请参阅附加的代码段。

var $form = $("#myform");
var $submitbutton = $("#submitbutton");

$form.on("blur", "input", () => {
  if ($form.valid()) {
    $submitbutton.removeAttr("disabled");   
  } else {
    $submitbutton.attr("disabled", "disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="myform">
  <input type="text" name="text1" required />
  <br/>
  <input type="text" name="text2" required />
  <br/>
  <button type="submit" id="submitbutton" disabled>Submit Enabled When Valid</button>
</form>