在验证之前停止提交表格

Question

我有一个这样结构的表单。

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/">
   <div class="form-group">
      <label for="id_email_address" class="d-none">Email Address</label>
      <input type="email" id="id_email_address" class="form-control border-0 rounded-0" name="email_address" value="" placeholder="Email Address">
      <input type="hidden" name="mailpiece_slug" value="{{ page.settings.email_newsletter_slug }}" />
      <input type="hidden" name="event_slug" value="subscribe" />
   </div>
</form>

我在文件底部还有一个脚本。该脚本的重点是在提交表单之前验证一个recaptcha。这是我的脚本。

<script>
    document.getElementById('email_subscription_form').addEventListener('submit', verifyRecaptcha);
    
    function verifyRecaptcha(e) {
        e.preventDefault()
        return false
    }
</script>

根据一些研究，我认为返回 false 的函数会阻止表单提交。但是，表单仍然提交并到达端点。

我也试过这个：

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsubmit="return verifyRecaptcha()">

和

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsbubmit="return false">

但表单仍然提交。

我可以做些什么来阻止表单提交直到验证？这是一个 Django 项目，所以模板是 Django 模板。

Answer 1

我进行了一些研究，并以参数onsubmit="" 的形式在其中适合调用验证函数，就像使用verifyRecaptcha(e) 一样。据我所知，return false 部分应该停止表单，可能是因为您没有在表单开始标记中使用onsubmit="verifyRecaptcha(e)"。所以直接 onload 脚本是行不通的。您的代码应如下所示：

html:

<form id="email_subscription_form" onsubmit="verifyRecaptcha(e) class="form-inline float-right" method="post" action="/my-endpoint/">
   <div class="form-group">
      <label for="id_email_address" class="d-none">Email Address</label>
      <input type="email" id="id_email_address" class="form-control border-0 rounded-0" name="email_address" value="" placeholder="Email Address">
      <input type="hidden" name="mailpiece_slug" value="{{ page.settings.email_newsletter_slug }}" />
      <input type="hidden" name="event_slug" value="subscribe" />
   </div>
</form>

js:

<script>
    function verifyRecaptcha(e) {
        e.preventDefault()
        return false
    }
</script>

Answer 2

我强烈建议您了解 django 如何帮助您处理表单：working with forms。

django 的内置表单管理已经处理了所有好东西，例如验证，并允许您专注于其他事情。此外，您仍然可以像往常一样添加您的 JS。

请参阅以上文档链接和以下示例以快速了解：

from django import forms
from django.core.exceptions import ValidationError

class ContactForm(forms.Form):
    # Everything as before.
    ...

    def clean_recipients(self):
        data = self.cleaned_data['recipients']
        if "fred@example.com" not in data:
            raise ValidationError("You have forgotten about Fred!")

        # Always return a value to use as the new cleaned data, even if
        # this method didn't change it.
        return data

这将检查“收件人”字段中是否包含特定的电子邮件。如果不是，它会引发 ValidationError，声明的文本显示在表单中相应字段的下方。