JavaScript проверка формы удаляет значения

Question

Я использую JavaScript библиотеку для проверки формы на стороне клиента (https://github.com/cferdinandi/bouncer). Он работает очень хорошо, но имеет одно странное поведение, которого я не понимаю.

У меня есть две кнопки для отправки формы, каждая с другим значением. Не проверяя эту форму с помощью библиотеки, я получу точное значение на стороне сервера. Но когда я использую библиотеку для проверки, значение исчезнет. Доступны все остальные значения формы. Я проверил весь код библиотеки и обнаружил, что "event.preventDefault ()" кажется проблемой.

Когда я удаляю эту строку, все в порядке, но, конечно, проверка формы не работает.

Есть у кого-нибудь идеи?

var submitHandler = function (event) {

            // Only run on matching elements
            if (!event.target.matches(selector)) return;

            // Prevent form submission
            event.preventDefault();

            // Validate each field
            var errors = publicAPIs.validateAll(event.target);

            // If there are errors, focus on the first one
            if (errors.length > 0) {
                errors[0].focus();
                emitEvent(event.target, 'bouncerFormInvalid', {errors: errors});
                return;
            }

            // Otherwise, submit if not disabled
            if (!settings.disableSubmit) {
                event.target.submit();
            }

            // Emit custom event
            if (settings.emitEvents) {
                emitEvent(event.target, 'bouncerFormValid');
            }

        };

<button class="" name="page[__page]" type="submit" value="0">back</button>
<button class="" name="page[__page]" type="submit" value="2">next</button>

Answer 1

Проблема, в соответствии со стандартами , похоже, заключается в том, что отправитель не перенаправляется, когда вызывается .submit():

Если одно из следующих истинно:

• Элемент поля - это кнопка , но не отправитель .

Затем продолжите.

Этот случай кажется разрешимым, переместив эту информацию в скрытое поле и используя отправителя, который равен next или prev, для заполнения его значения.

Пример

document.body.innerHTML = `
  <form>
    <input type="hidden" name="page[__page]">
    <button class="" type="submit" value="0">back</button>
    <button class="" type="submit" value="2">next</button>
  </form>
`;

document.body.firstElementChild.addEventListener('submit', e => {
  e.preventDefault();
  var page = e.target.querySelector('input[name="page[__page]"]');
  page.value = e.submitter.value;
  e.target.submit();
});

На этом этапе страница будет передана, как и ожидалось, и ваша проблема должна быть решена.

PS вы также можете изучить form.repostValidity () и использовать e.preventDefault(), только если отчет возвращает false.