在同一表单上处理多个提交按钮

Question

我正在创建一个在同一表单上有多个提交按钮的页面。首先，所有按钮都正常工作，但是当我添加一个带有远程验证的字段时，一个奇怪的行为开始发生。

1º模拟（不起作用）：

1. 在电子邮件字段中写一封电子邮件;
2. 点击任意按钮（它会发送请求）;
3. 单击另一个按钮（请注意它不起作用，并且从当前URL发送了请求）;

2º模拟（工作原理）：

1. 在电子邮件字段中写一封电子邮件;
2. 点击任意按钮（它会发送请求）;
3. 点击电子邮件字段;
4. 单击另一个按钮（请注意，此时表单提交了正确的按钮请求）;

以下是有问题的代码摘要：

HTML：

<form method="post" novalidate="novalidate">
  <label for="Input_Email">Email</label>
  <input class="form-control" type="email" data-val="true" data-val-remote="'Email' is invalid." data-val-remote-additionalfields="*.Email" data-val-remote-type="Get" data-val-remote-url="https://jsonblob.com/api/89d8b876-54eb-11e9-8393-abf1ae9ddd11" id="Input_Email" name="Input.Email" value="">
  <span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>

  <br>
  <button formaction="/MyPage/Register">Register</button>
  <button formaction="/MyPage/RequestInfo">RequestInfo</button>
</form>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.js"></script>

注意：我正在使用jquery.validate和jquery-validation-unobtrusive插件。

我想知道这是否是正常行为，我该如何解决它。谢谢。

Answer 1

经过一些测试和调试，我在jquery-validate插件中找到了具有此行为的行。当我们单击提交按钮时，jquery-validate将验证所有表单字段，包括远程验证字段。一旦完成远程验证，插件就会通过代码行触发表单提交事件：

line 1123:  $(this.currentForm).submit();

当表单已经过验证并单击按钮时，提交事件将使用按钮的“formAction”属性。

当表单尚未经过验证并且存在远程验证时，将调用表单提交事件，因此表单没有操作，并且当前URL用于发布。

可用于解决问题的解决方案：

解决方案1：

在页面加载中验证表单。

$(function () {
    $('form').valid();
});

解决方案2：

在窗体上添加action属性作为单击的按钮。

$(function () {
    $('form button').click(function () {
        if (this.formAction) {
            $(this).parent('form').attr('action', this.formAction);
        }
    });
});