禁用基于验证的表单提交

Question

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

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

谢谢。

Answer 1

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

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

示例见附件 sn-p。

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>