使用AJAX操作Django表单下拉选择器时提交提示必填项报错

问题根因 #

你当前的代码逻辑存在两处核心错误，直接导致必填校验报错：

1. 若你是想通过本次拖拽触发的AJAX请求直接更新数据库的stage字段：你没有将stage参数放到AJAX的POST请求体中，后端Django接口/表单校验时检测到必填字段缺失，自然返回必填报错。
2. 若你是想拖拽后先修改本地表单的下拉框值，后续手动提交表单：你将下拉框赋值逻辑放在了AJAX的success回调中，而本次AJAX本身因为没有传递必填的stage参数会请求失败，success回调根本不会执行，下拉框的值始终为空，提交表单时前端HTML5的required校验就会弹出必填提示。
   另外你用$(document).one('drop')绑定事件，意味着拖拽事件只会触发一次，第二次拖拽就失效了，需要换成on绑定。

场景1：通过AJAX直接更新数据库（推荐） #

直接把stage参数放到请求体中传给后端，不需要修改本地表单即可完成数据更新，代码修改如下：

// 把one换成on，支持多次拖拽触发
$(document).on('drop', function(ev){            
    ev.preventDefault();            
    var stage_title_path = '#' + el.id + " .stage-title";
    var stage_title = $(stage_title_path).html();
    // 这里可以根据拖拽到的stage-column动态获取对应的stage id，测试可以先写死3
    var target_stage_id = 3;
    $.ajax({
        type:'POST',
        url:deal_card_url,
        data:{
            deal_owner: 'Sally Sue',
            deal_address: '745 Amen Street',
            deal_arv: '222',
            deal_repair: '333',
            stage: target_stage_id, // 新增stage参数
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(){
            // 更新成功后可以加自定义提示
            alert('阶段更新成功');
        }
    });
});

后端Django部分正常接收stage参数，存入对应deal对象的stage字段即可，不需要额外修改校验逻辑。

场景2：拖拽仅修改本地表单值，后续手动提交 #

如果你确实需要先修改表单值，再由用户手动提交，把下拉框赋值逻辑从success回调中移出来即可：

$(document).on('drop', function(ev){            
    ev.preventDefault();  
    // 拖拽触发后直接修改下拉框值
    $("#id_stage").val("3").change();
    var stage_title_path = '#' + el.id + " .stage-title";
    var stage_title = $(stage_title_path).html();
    $.ajax({
        type:'POST',
        url:deal_card_url,
        data:{
            deal_owner: 'Sally Sue',
            deal_address: '745 Amen Street',
            deal_arv: '222',
            deal_repair: '333',
            stage: 3, // 补充stage参数避免AJAX请求报错
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(){
            // 自定义成功后的逻辑
        }
    });
});

内容的提问来源于stack exchange，提问作者cdiddlez