为什么页面不显示错误信息？

Question

以下是我的代码，我想用Ajax实现页面的传递信息，但当数据为空提交时，页面输入框下面不显示错误提示，我代码中明明写了的
后端代码

@csrf_exempt
def task_add(request):
    """任务添加"""
    print(request.POST)
    # 1.用户发送过来的数据进行校验(ModelForm进行校验)
    form = TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return HttpResponse(json.dumps(data_dict))

    data_dict = {"status": False, 'error': form.errors}
    return HttpResponse(json.dumps(data_dict, ensure_ascii=False))

前端代码

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 新建任务
        </div>
        <div class="panel-body">
            <div class="panel-body">
                <div>
                    <form id="formAdd" novalidate>
                        <!--<div class="clearfix">-->
                        {% for field in form%}
                        <!--<div class="col-xs-6">-->
                        <div class="form-group" style="position:relative;margin-bottom:20px;" >
                            <label> {{ field.label}}</label>
                            {{field}}
                            <span class="error-msg" style="color:red;position:absolute"></span>
                        </div>
                        <!--</div>-->
                        {%endfor%}
                        <!--</div>-->
                        <button id="btnAdd" type="button" class="btn btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block time %}
<script type="text/javascript">

    $(function() {
    <!--页面框架加载完成后代码自动执行-->
        binBtnAddEvent();
    })
    function binBtnAddEvent() {
        $("#btnAdd").click(function () {

            $(".error-msg").empty();

            $.ajax({
               url:"/task/add/",
               type:"POST",
               data:$("#formAdd").serialize(),
               taType:"json",
                success :function (res) {
                    if (res.status){
                        alert("添加成功")
                    }else{
                        $.each(res.error,function(name,data){
                            $('#id_'+name).next().text(data[0]);
                        })
                    }
                }
            })
        })
    }
</script>

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的代码和描述，问题可能出在几个地方。下面是一些可能的解决方案：

1. 确保错误信息被正确处理：

   • 检查后端代码中的form.errors是否正确获取了错误信息。Django的表单验证应该能够返回一个错误字典，其中包含每个字段的错误列表。

2. 前端JavaScript中的错误处理：

   • 您在success函数中使用$.each(res.error, function(name, data) {...})来遍历错误信息，但是您使用了$('#id_'+name).next().text(data[0]);来设置错误信息。这里假设字段的ID是以id_开头的，如果不是这样，请根据实际情况调整选择器。
   • 确保res.error是一个对象，其键是字段名，值是错误信息的数组。如果后端返回的数据结构不是这样的，您需要相应地调整遍历逻辑。

3. Ajax请求的设置：

   • 您的Ajax请求中有一个拼写错误：taType:"json"应该是dataType:"json"。确保设置正确的dataType，以便jQuery能够正确解析返回的JSON数据。

4. 表单序列化和CSRF令牌：

   • 确保您的表单数据是通过$("#formAdd").serialize()正确序列化的。如果表单中包含文件上传等特殊字段，可能需要其他方法来处理。
   • 您的后端代码使用了@csrf_exempt装饰器来禁用CSRF验证。在生产环境中，建议不要这样做，因为它会使您的应用容易受到CSRF攻击。如果需要启用CSRF验证，请确保前端发送的POST请求中包含了正确的CSRF令牌。

5. CSS样式问题：

   • 检查CSS样式，确保.error-msg的样式没有导致它不可见。例如，如果它被设置为display: none;或者visibility: hidden;，那么即使文本被设置，它也不会显示。

6. 调试和测试：

   • 使用浏览器的开发者工具来调试JavaScript代码，检查网络请求和响应，确保Ajax请求发送和接收的数据是正确的。
   • 逐步测试每个字段，确保当它们为空时，能够触发错误并显示相应的提示信息。

根据您提供的截图，看起来您可能需要在表单字段旁边添加一个唯一的标识符，以便JavaScript能够找到并更新正确的错误消息。例如，如果您的表单字段是动态生成的，每个字段旁边可能需要一个唯一的<span class="error-msg">。

最后，确保在实际环境中测试所有可能的输入情况，以验证错误处理逻辑是否按预期工作。