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

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 是空的，所以我的数据 none 被发送到服务器。

好像和jQuery.validate有关，好像我把JavaScript完全换成了这个...

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

...然后控件被禁用，我的数据通过正常。这似乎暗示我在 jQuery.validate.

上做错了什么

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

Answer 1

原因是禁用的输入未与 form.Refer 一起提交到 here and here。

您应该使用 readonly 属性而不是 disabled。 Read-only 字段不能由用户编辑，但仍与表单一起提交。

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

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

ASP.NET Core view model when disabling form fields with jQuery.validate

javascript

jquery

jquery-validate

asp.net-core