gpt4 book ai didi

python - 使用 Ajax 验证并提交 Django 表单 (django-crispy-forms)

转载 作者:行者123 更新时间:2023-12-05 05:17:47 24 4
gpt4 key购买 nike

我是 Django 和 Web 开发的新手。我需要帮助使用 Ajax 提交 Django 表单(使用 django-crispy-forms) 我如何:

  1. 验证输入

  2. 无需重新加载即可提交

  3. 验证失败时显示错误

现在我可以提交表单并将条目保存到数据库中,但在此过程中会重新加载整个页面。我在下面包含了我的代码的相关片段

//表单.py

class SubscriptionForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(SubscriptionForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.template_pack = 'bootstrap3'
self.helper.form_tag = True
self.helper.form_id = 'sub-form-1'
self.helper.form_class = 'form-inline'
self.helper.field_template = 'bootstrap3/inline_field.html'
self.helper.layout = Layout(

Div(Div(css_class='sub-form-notifications-content'),
css_class='sub-form-notifications'),

InlineField('name', id='subName'),
InlineField('email', id='subEmail'),

FormActions(Submit('submit', 'Notify me', css_class='form-control')),

)

class Meta:
model = Sub
fields = "__all__"

def clean_email(self):
"""
Validate that the supplied email address is unique for the
site.

"""
if User.objects.filter(email__iexact=self.cleaned_data['email']):
raise forms.ValidationError(
_("This email address is already in use. Please supply a different email address."))
return self.cleaned_data['email']

// View .py

from django.shortcuts import render, redirect
from .forms import SubscriptionForm
from .models import Sub


def index(request):
if request.method == 'POST':
sub_form = SubscriptionForm(request.POST)
if sub_form.is_valid():
sub_form.save()
# return redirect('landing:landing')

else:
sub_form = SubscriptionForm()
return render(request, 'landing/index.html', {'sub-form': sub_form})

//模板

...
{% crispy sub-form %}
...

//呈现的 HTML 格式

<form class="form-inline" id="sub-form-1" method="post">
<input type='hidden' name='csrfmiddlewaretoken'
value='tdiucOssKfKHaF7k9FwTbgr6hbi1TwIsJyaozhTHFTKeGlphtzUbYcqf4Qtcetre'/>
<div class="sub-form-notifications">
<div class="sub-form-notifications-content">
</div>
</div>
<div id="div_id_name" class="form-group">
<label for="subName" class="sr-only requiredField">Name</label>
<input type="text" name="name" maxlength="30" required placeholder="Name"
class="textinput textInput form-control" id="subName"/>
</div>
<div id="div_id_email" class="form-group"><label for="subEmail" class="sr-only requiredField">Email address</label>
<input type="email" name="email" maxlength="60" required placeholder="Email address"
class="emailinput form-control" id="subEmail"/>
</div>
<div class="form-group">
<div class="controls ">
<input type="submit" name="submit" value="Notify me" class="btn btn-primary" id="submit-id-sub-form"/>
</div>
</div>
</form>

最佳答案

我将尝试向您介绍如何轻松完成此操作。

将 onsubmit 事件监听器添加到表单和错误 block e。 G。在将显示错误的表单下方。

模板

<form class="form-inline" id="sub-form-1" method="post" onsubmit="sendData();">
...
</form>
<div class="error-block">
<!-- Here is the space for errors -->
</div>

现在是将数据发送到 View 以进行验证和保存的处理程序

<script>

function sendData(e) {
e.preventDefault(); // don not refresh the page

var form_data = {
name: $('input[name="name"]').val(),
... other field values ...
}

$.ajax({
url: "{% url 'url-you-want-send-form-to' %}",
method: "POST",
data: form_data,
success: function(response) {
// here are the success data in the response
// you can redirect the user or anything else
//window.location.replace("{% url 'success-url' %}");
},
error: function(response) {
// here are the errors which you can append to .error-block
//$('.error-block').html(response);
}
})

}

</script>

在 View 中,您将收到与提交表单相同的表单中的数据,但您不必将整个模板呈现给响应,而只需呈现经过验证的表单中的错误,因此您将发送的 View 您的 ajax POST 请求必须与呈现表单的 View 不同。您可以创建另一个来处理它。

关于python - 使用 Ajax 验证并提交 Django 表单 (django-crispy-forms),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48736031/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com