Handling multiple submit buttons on the same form

Question

I'm creating a page that has multiple submit buttons on the same form. At first, all the buttons worked normally, but when I added a field with remote validation a strange behavior started happening.

1º Simulation (It doesn't work):

1. Write an email in the email field;
2. Click any button (it will send a request);
3. Click another button (note that it didn't work and a request was sent from the current URL);

2º Simulation (It works):

1. Write an email in the email field;
2. Click any button (it will send a request);
3. Click on email field;
4. Click another button (note that this time the form submits the correct request of the button);

Below is the code summary that has the problem:

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>

Note: I'm using the jquery.validate and jquery-validation-unobtrusive plugins.

I wonder if this is normal behavior and how can I solve it. Thanks.

Answer 1

After some testing and debugging, I found the line in the jquery-validate plugin that has this behavior. When we click a submit button, jquery-validate validates all form fields, including the remote validation field. As soon as it completes remote validation, the plugin trigger the form submit event through the line of code:

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

When the form is already validated and the button is clicked, the submit event uses the 'formAction' attribute of the button.

When the form has not yet been validated and there is a remote validation, the form submit event is called, so the form has no action and the current URL is used to post.

Solutions that can be used to work around the problem:

Solution 1:

Validate the form in page load.

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

Solution 2:

Add the action attribute on the form as the clicked button.

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