如何通过Contributte Live-form-validation防止表单重复提交？

结合你使用的Nette框架、Contributte Live-form-validation和Naja工具，我们可以从前端拦截重复点击和后端令牌验证两个层面实现重复提交防护，覆盖Ajax和非Ajax表单场景。

一、非Ajax表单防护 #

1. 前端：提交时禁用按钮 #

在用户点击提交后立即禁用按钮，防止重复点击触发多次提交：

document.querySelectorAll('form:not(.js-ajax-form)').forEach(form => {
  form.addEventListener('submit', function() {
    const submitBtn = this.querySelector('button[type="submit"]');
    if (submitBtn) {
      submitBtn.disabled = true;
      submitBtn.textContent = '提交中...';
    }
  });
});

2. 后端：一次性CSRF令牌验证 #

Nette的表单防护默认允许令牌重复使用，我们可以修改令牌存储规则，让令牌仅生效一次，彻底防止后端层面的重复提交：

use Nette\Application\UI\Form;
use Nette\Security\TokenStorage;
use Nette\Http\Session;

class YourPresenter extends Nette\Application\UI\Presenter
{
    public function createComponentContactForm(): Form
    {
        $form = new Form();
        // 添加表单字段（示例）
        $form->addText('email', '邮箱')->setRequired('请输入邮箱');
        $form->addTextArea('message', '留言')->setRequired('请输入留言内容');

        // 配置一次性CSRF防护
        $tokenStorage = new TokenStorage($this->getSession(), 'contact-form-csrf', 1);
        $form->addProtection('请勿重复提交表单')->setTokenStorage($tokenStorage);

        $form->onSuccess[] = [$this, 'contactFormSuccess'];
        return $form;
    }

    public function contactFormSuccess(Form $form, array $values): void
    {
        // 处理表单逻辑（如发送邮件、存储数据）
        $this->flashMessage('提交成功');
        $this->redirect('this');
    }
}

二、Ajax表单防护（结合Naja与Live-form-validation） #

Ajax表单需要结合Naja的事件钩子和Live-form-validation的实时验证，确保验证通过后才触发提交，同时拦截重复请求：

1. 前端实现代码 #

document.addEventListener('DOMContentLoaded', function() {
    // 拦截Naja的Ajax提交请求
    naja.addEventListener('before', function(event) {
        const form = event.element;
        if (!form || !(form instanceof HTMLFormElement)) return;

        // 检查是否正在提交中，拦截重复请求
        if (form.dataset.submitting === 'true') {
            event.preventDefault();
            return;
        }

        // 触发Live-form-validation的实时验证，验证不通过则阻止提交
        const isValid = window.LiveFormValidation.validateForm(form);
        if (!isValid) {
            event.preventDefault();
            return;
        }

        // 标记表单为提交中，禁用按钮
        form.dataset.submitting = 'true';
        const submitBtn = form.querySelector('button[type="submit"]');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.textContent = '提交中...';
        }
    });

    // 提交完成（成功/失败/中断）后恢复表单状态
    ['success', 'error', 'abort'].forEach(eventType => {
        naja.addEventListener(eventType, function(event) {
            const form = event.element;
            if (!form || !(form instanceof HTMLFormElement)) return;

            delete form.dataset.submitting;
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.textContent = '提交';
            }
        });
    });
});

2. 关键说明 #

• 给Ajax表单添加js-ajax-form类，方便区分非Ajax表单；
• 通过form.dataset.submitting标记提交状态，拦截重复触发的Ajax请求；
• 先调用Live-form-validation的validateForm方法，确保表单验证通过才进入提交流程；
• 无论提交成功、失败还是中断，都要恢复按钮状态和标记，避免表单无法再次提交。

三、注意事项 #

1. 令牌过期处理：一次性CSRF令牌会在提交后失效，若用户停留页面过久令牌过期，Nette会自动返回错误提示，用户只需刷新页面即可重新提交；
2. 前端防护是辅助：后端的一次性令牌验证是核心防护，即使绕过前端禁用按钮的逻辑，后端也会拒绝重复提交；
3. 兼容Live-form-validation：确保Live-form-validation的初始化逻辑正常，window.LiveFormValidation对象能正常调用。

内容的提问来源于stack exchange，提问作者Vladimír Mlázovský