为什么页面不能清楚旧的错误信息？

Question

以下是我的代码，我想通过ajax实现页面和数据库的数据传递，但为什么当页面已经填入数据时页面反馈错误信息为这个字段是必填项，而且数据库中设置的默认数据，页面依旧反馈是的报错必填项
前端代码

<div class="container">
    <div>
        <input id="btnAdd" type="button" value="新建订单" class="btn btn-primary">
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建订单</h4>
                </div>
                <div class="modal-body">
                    <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>-->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btnSave" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{%block time %}
<script type="text/javascript">
        $(function(){
            bindBtnAddEvent();
            bindBtnSaveEvent();
        })

<!--        订单展示-->
        function bindBtnAddEvent() {
            $('#btnAdd').click(function(){
<!--                点击新建按钮，显示对话框-->
                $('#myModal').modal("show");
            });
        }
       function bindBtnSaveEvent() {
            $("#btnSave").click(function(){
                $(".error-msg").empty();
                $.ajax({
                    url:"/order/add/",
                    type:"POST",
                    data:$("formAdd").serialize(),
                    dataType:"json",
                    success:function(res){
                       if(res.status){
                            alert("创建成功");
                       }else{
                            $.each(res.error,function(name,errorList){
                                $("#id_"+name).next().text(errorList[0]);
                            })
                        }
                    }
                })
            });
        }
</script>

后端代码

@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))

Answer 1

引自免费微信小程序：皆我百晓生

根据你提供的代码和描述的问题，我认为可能出现页面不能清除旧的错误信息的原因可能有以下几点：

1. 前端在获取到错误信息后，没有正确清空或更新错误信息。在ajax的success函数中，你是通过 $("#id_"+name).next().text(errorList[0]); 来设置错误信息的，但在后续的操作中并没有清空这些信息。当再次提交表单时，这些错误信息仍然存在。你可能需要在表单提交前或获取新的数据后清空这些错误信息。
2. 后端在返回错误信息时，可能包含了之前的错误信息。你需要确保每次返回的错误信息都是针对当前提交的表单数据的，而不是之前提交的或者默认的错误信息。如果你的数据库设置了默认数据，那么在前端提交表单时，需要确保这些默认数据被正确处理和验证，否则可能会出现不符合预期的错误信息。

针对这些问题，你可以尝试以下解决方案：

1. 在ajax的success函数里清空所有的错误信息。你可以通过遍历所有的 form-group 元素并清空其对应的错误消息来实现这一点。例如：

success:function(res){
    if(res.status){
        alert("创建成功");
    }else{
        $.each(res.error,function(name,errorList){
            $("#id_"+name).next().text(errorList[0]);
        });
        // 清空所有错误消息
        $(".error-msg").empty();
    }
}

1. 确保后端返回的错误信息是针对当前提交的表单数据的。你需要检查你的后端代码，确保在验证表单数据时正确处理了所有可能的输入情况，包括数据库中的默认数据。如果发现有不符合预期的数据，应该返回相应的错误信息。
2. 另外，你也需要检查你的表单字段是否有唯一性约束等设置，这些设置可能会导致在插入新数据时产生错误。如果某个字段是必须填写的，但是在数据库中已经有相同的数据存在（例如用户名等），那么在插入新数据时可能会产生错误。在这种情况下，你需要确保前端在提交表单前验证了这些字段的唯一性，或者在后端处理时正确处理这种冲突情况。

希望这些建议能帮助你解决问题。如果还有其他问题，欢迎继续提问。