如何使用JavaScript校验每个Wtform RadioField是否已选中有效值

核心逻辑 #

WTForms渲染RadioField组件时，同一RadioField下的所有单选按钮会共用相同的name属性，不同RadioField的name属性相互独立。我们只需校验每个name对应的单选组是否存在至少一个选中项，即可实现「所有RadioField都已作答」的判断。

完整可用代码 #

<script>
function disableSubmit () {
    // 收集所有单选按钮的去重name值，对应每个独立的RadioField
    const allRadios = document.querySelectorAll('input[type="radio"]');
    const radioGroups = new Set(Array.from(allRadios).map(item => item.name));
    let allAnswered = true;
    // 逐个校验每个单选组是否有选中项
    for (const groupName of radioGroups) {
        const hasChecked = document.querySelector(`input[type="radio"][name="${groupName}"]:checked`);
        if (!hasChecked) {
            allAnswered = false;
            break;
        }
    }
    // 控制提交按钮状态
    const submitBtn = document.getElementById('submit');
    submitBtn.disabled = !allAnswered;
};

window.onload = function() {
    disableSubmit();
    // 给所有单选按钮添加 change 事件监听，用户选择后自动更新按钮状态
    document.querySelectorAll('input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', disableSubmit);
    });
};
</script>

关键优化点 #

• 放弃原逻辑中「所有单选按钮都要选中」的判断，改为按RadioField分组校验
• 新增单选按钮选择事件监听，用户每次作答后实时更新提交按钮状态，无需额外操作
• 完全兼容WTForms默认生成的表单结构，不需要修改后端Flask的表单定义代码

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