Обработка нескольких кнопок отправки в одной форме - PullRequest
Новая
       45

Обработка нескольких кнопок отправки в одной форме

0 голосов
/ 02 апреля 2019

Я создаю страницу с несколькими кнопками отправки в одной форме.Сначала все кнопки работали нормально, но когда я добавил поле с удаленной проверкой, началось странное поведение.

1º Симуляция (не работает):

  1. Напишите письмо в поле электронной почты;
  2. Нажмите любую кнопку (она отправит запрос);
  3. Нажмите другую кнопку (обратите внимание, что она не работает, и запросбыло отправлено с текущего URL);


2º Simulation (Работает):

  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-ненавязчивые плагины.

Интересно, это нормальное поведение и как я могу его решить.Спасибо.

1 Ответ

0 голосов
/ 02 апреля 2019

После некоторого тестирования и отладки я обнаружил строку в плагине jquery-validate, которая имеет такое поведение.Когда мы нажимаем кнопку отправки, jquery-validate проверяет все поля формы, включая поле удаленной проверки.Как только он завершает удаленную проверку, плагин запускает событие отправки формы через строку кода: 

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

Когда форма уже подтверждена и нажата кнопка, событие отправки использует 'formAction'атрибут кнопки.

Если форма еще не проверена и имеется удаленная проверка, вызывается событие отправки формы, поэтому форма не имеет действия, и для публикации используется текущий URL.


Решения, которые можно использовать для решения проблемы:

Решение 1:

Проверка формы при загрузке страницы. 

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

Решение 2:

Добавьте атрибут формы в форму в качестве нажатой кнопки. 

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