javascript - 使用 jQuery.validate 禁用表单字段时的 ASP.NET Core View 模型

Question

我有一个 HTML 表单，我希望当用户单击提交按钮时，该按钮和表单中的所有输入元素(主要是文本框)都被禁用，以防止他们更改任何数据，或单击再次按下按钮。我在表单上使用 jQuery.validate，而没有使用不显眼的插件。

表单的标记如下所示(为了清晰起见，删除了不相关的标记)...

<form method="post" asp-controller="Home" asp-action="Jim">
  <div class="form-group row">
    <label for="Name">Your name</label>
    <input type="text" id="UserName" name="UserName">
  </div>

  <div class="form-group row">
    <label for="Email">Email</label>
    <input type="text" id="Email" name="Email">
  </div>

  <div class="form-group row">
    <div>
      <button type="submit">Submit</button>
    </div>
  </div>
</form>

我有以下使用 jQuery.validate...

的 JavaScript

$("form").validate({
  rules: {
    UserName: {
      required: true,
      minlength: 3
    },
    Email: {
      required: true
    },
    Message: {
      required: true
    }
  },
  submitHandler: function(form) {
    form.submit();
  }
});

这就是页面上的所有 JavaScript。

这很好用。但是，如果我在 SubmitHandler 函数中添加一行...

  submitHandler: function(form) {
    $("form input").prop('disabled', true);
    form.submit();
  }

...然后提交表单时，Request.Form 为空，因此我的任何数据都不会发送到服务器。

它似乎与jQuery.validate有关，好像我用这个完全替换了JavaScript...

$(function() {
  $("form").submit(function(form) {
    $("form input").prop('disabled', true);
  });
});

...然后控件被禁用，我的数据正常。这似乎意味着我在 jQuery.validate 上做错了什么。

有人能够解释为什么当我在使用 jQuery.validate 时禁用控件时我的数据无法通过吗？

Answer 1

原因是禁用的输入没有随表单一起提交。引用here和here .

您应该使用readonly 属性而不是disabled。只读字段无法由用户编辑，但仍随表单一起提交。

submitHandler: function (form) {
    $("form input").prop('readonly', true);
    form.submit();
}