时间戳

首页 > 解决方案 > JavaScript 表单验证移除值

javascript - JavaScript 表单验证移除值

问题描述

我正在使用 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>

标签： javascriptformsvalidationnpm

解决方案

根据标准，问题似乎是提交者在.submit()被调用时没有被转发：

如果以下任何一项为真：

  • field 元素是一个按钮，但它不是 submitter。

然后继续。

这种情况似乎是可以解决的，将该信息移动到隐藏字段中，并使用提交者（即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。

推荐阅读