使用 jQuery.validate 禁用表单字段时的 ASP.NET Core 视图模型

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>

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

$("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();
}