如果用户快速单击提交按钮两次，请避免表单提交两次

Question

我一直在努力解决这个问题，但无法得到正确的答案。

单击后禁用按钮没有帮助，因为它需要在请求无效的情况下工作。

表单不应该已经在处理这种情况了，因为在 app.py 中我在 form.validate_on_submit() 之后重定向

关于如何阻止表单在快速提交按钮按下时提交两次有什么想法吗？

注册.html：

    {% extends "layout.html" %}

{% block content %}

<div class="mb-5">
    <h2 class="text-center mt-3">Register</h2>

    <form action="/register" method="post" class="mt-3 mb-3" novalidate autocomplete="off">

        {{ form.csrf_token }}

    {# Username #}
        <div class="mb-3">
            {{ form.username.label(class="form-label") }}
      {{ form.username(class="form-control") }}
      {% for error in form.username.errors %}
            <span style="color: red">[{{ error }}]</span>
            {% endfor %}
        </div>

    {# Email #}
        <div class="mb-3">
            {{ form.email.label(class="form-label") }}
      {{ form.email(class="form-control", autocomplete="username", autocapitalize="off") }}
      {% for error in form.email.errors %}
            <span style="color: red">[{{ error }}]</span>
            {% endfor %}
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>

    {# Password #}
        <div class="mb-3">
            {{ form.password.label(class="form-label") }}
      {{ form.password(class="form-control", autocomplete="new-password") }}
            {% for error in form.password.errors %}
            <span style="color: red">[{{ error }}]</span>
            {% endfor %}
        </div>

    {# Passowrd confirm #}
        <div class="mb-3">
            {{ form.confirm.label(class="form-label") }}
      {{ form.confirm(class="form-control", autocomplete="new-password") }}
      {% for error in form.confirm.errors %}
            <span style="color: red">[{{ error }}]</span>
            {% endfor %}
        </div>

    {# Submit button #}
        <div class="d-flex justify-content-center">
    {{ form.submit(class="btn btn-secondary mt-2", id="submit-button")}}
    </div>
    </form>

    <div class="text-center">
        <p class="d-inline me-3">You have an account?</p>
        <a href="{{url_for('login')}}">Login</a>
    </div>
</div>


{% endblock %}

app.py

@app.route("/register", methods=['GET','POST'])
def register():
  form = RegisterForm()

  if form.validate_on_submit():
    
    hashed_password = bcrypt.generate_password_hash(form.password.data)
    new_user = User(username=form.username.data, email=form.email.data.lower(), password=hashed_password)
    db.session.add(new_user)
    db.session.commit()
    return redirect(url_for('login'))
  else:
    print(form.errors.items())
  
  return render_template("register.html", form=form)

Answer 1

为了防止用户快速单击提交按钮时表单被提交两次，您可以使用一种称为“表单禁用”的 JavaScript 技术。您可以通过以下方式修改 HTML 模板和 JavaScript 来实现此目的：

制作register.html：

{% extends "layout.html" %}

{% block content %}

<div class="mb-5">
    <h2 class="text-center mt-3">Register</h2>

    <form action="/register" method="post" class="mt-3 mb-3" novalidate autocomplete="off" id="register-form">

        {{ form.csrf_token }}

    {# Username #}
        <!-- ... (your existing code) ... -->

    {# Submit button #}
        <div class="d-flex justify-content-center">
            {{ form.submit(class="btn btn-secondary mt-2", id="submit-button")}}
        </div>
    </form>
</div>

<script>
    document.getElementById("register-form").addEventListener("submit", function () {
        document.getElementById("submit-button").disabled = true;
    });
</script>

{% endblock %}