Javascript 有没有一种方法可以通过ajax提高正常的Django表单验证？

我发现了一个有点过时的。我想知道不使用另一个图书馆是否可能

当前，

forms.ValidationError

将触发

form\u invalid

，它将只返回带有错误和状态代码的JSON响应。
我有一个ajax表单，不知道在提交ajax表单时，是否可以在表单字段上进行通常的django字段验证

触发错误的我的表单：

class PublicToggleForm(ModelForm):
    class Meta:
        model = Profile
        fields = [
            "public",
        ]
    def clean_public(self):
        public_toggle = self.cleaned_data.get("public")
        if public_toggle is True:
            raise forms.ValidationError("ERROR")  
        return public_toggle  

针对ajax的相应视图的mixin：

from django.http import JsonResponse

class AjaxFormMixin(object):

    def form_invalid(self, form):
        response = super(AjaxFormMixin, self).form_invalid(form)
        if self.request.is_ajax():
            return JsonResponse(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        response = super(AjaxFormMixin, self).form_valid(form)
        if self.request.is_ajax():
            print(form.cleaned_data)
            print("VALID")
            data = {
                'message': "Successfully submitted form data."
            }
            return JsonResponse(data)
        else:
            return response

观点：

class PublicToggleFormView(AjaxFormMixin, FormView):
    form_class = PublicToggleForm
    success_url = '/form-success/'  

在浏览器控制台上，错误将以400错误请求的形式出现，然后是带有正确ValidationError消息的responseJSON

编辑：有没有办法让字段验证显示客户端

编辑：附加代码：

前端接收到的数据的完整副本：

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort:
ƒ (a)
always:
ƒ ()
catch:
ƒ (a)
done:
ƒ ()
fail:
ƒ ()
getAllResponseHeaders:
ƒ ()
getResponseHeader:
ƒ (a)
overrideMimeType:
ƒ (a)
pipe:
ƒ ()
progress:
ƒ ()
promise:
ƒ (a)
readyState:
4
responseJSON:
public:
["ERROR"]
__proto__:
Object
responseText:
"{"public": ["ERROR"]}"
setRequestHeader:
ƒ (a,b)
state:
ƒ ()
status:
400
statusCode:
ƒ (a)
statusText:
"Bad Request"
then:
ƒ (b,d,e)
__proto__:
Object  

模板中的表单是使用Django的{{as_p}}呈现的：

{% if request.user == object.user %}
        Make your profile public?
        <form class="ajax-public-toggle-form" method="POST" action='{% url "profile:detail" username=object.user %}' data-url='{% url "profile:public_toggle" %}'>

            {{public_toggle_form.as_p|safe}}
        </form>
    {% endif %}  

---

您是否有JSON格式的错误响应，格式为

{field\u key:err\u codes，…}

。然后，您只需在每个渲染的表单字段下创建

，这可以通过逐个字段手动渲染表单字段来完成，也可以在表单下方创建一个有错误的块，例如：

<div id="public_toggle_form-errors" class="form-error" style="display: none;"><div>

所以看起来好像发生了什么错误，然后添加到handleFormError函数代码中：

function handleFormError(jqXHR, textStatus, errorThrown){
    ...
    $('#public_toggle_form-errors').text(textStatus.["public"]);
    $('#public_toggle_form-errors').show();
    ...
}

---

我想你会明白的。

实际上这是服务器端验证。您填写表单并通过AJAX请求将数据发送到服务器上进行验证，然后向您发送一个JSON响应，其中表单字段名称作为键，错误作为值，您可以通过javascript在html页面中显示。对不起——我的意思是如何让验证错误显示给客户端。我看到验证本身是在服务器端进行的。但是错误消息不会出现在客户端。请将您收到的数据作为响应、呈现的表单和javascript ajax函数发布到这里。@Krystofee done

div.form-error {
    margin: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255,125,125,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(255,125,125,1);
    box-shadow: 0px 0px 5px 0px rgba(255,125,125,1);
}

function handleFormError(jqXHR, textStatus, errorThrown){
    ...
    $('#public_toggle_form-errors').text(textStatus.["public"]);
    $('#public_toggle_form-errors').show();
    ...
}