Question

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

1º模拟（不起作用）：

在电子邮件字段中写一封电子邮件；
单击任何按钮（它将发送请求）；
单击另一个按钮（请注意，该按钮不起作用，并且从当前URL发送了一个请求）；

2º模拟（有效）：

在电子邮件字段中写一封电子邮件；
单击任何按钮（它将发送请求）；
单击电子邮件字段；
单击另一个按钮（请注意，这次表单提交了对该按钮的正确请求）；

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

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();

当表单已经通过验证并单击按钮后，submit事件将使用按钮的'formAction'属性。

当表单尚未通过验证并进行远程验证时，将调用表单提交事件，因此该表单没有任何动作，并且使用当前URL进行发布。

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

解决方案1：

验证页面加载中的表单。

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

解决方案2：

在表单上添加动作属性作为单击的按钮。

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

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

1 个答案: