Django环境下如何结合step_number与JS实现字段校验及步骤跳转？

需求说明 #

在不使用表单的前提下，实现两个核心功能：

• 通过step_number属性完成多步骤页面的跳转
• 使用JavaScript校验当前步骤的字段是否为空
• 将步骤跳转逻辑与校验逻辑整合，确保只有校验通过后才跳转至下一页

现有问题分析 #

当前代码中，按钮同时绑定了onclick="validatefields1()"和通过addEventListener添加的跳转逻辑，这会导致无论校验是否通过，页面都会强制跳转——因为两个事件会独立执行，没有关联校验结果。

解决方案与代码修改 #

1. 调整HTML按钮代码

移除按钮上的onclick属性，统一通过事件监听处理逻辑：

<div class="mt-3">
    <button class="button btn-navigate-form-step" type="button" step_number="2">Next</button>
</div>

2. 重构JavaScript校验与跳转逻辑

将校验函数改为可复用版本，根据当前步骤校验对应字段；并在按钮点击事件中先执行校验，通过后再触发步骤跳转：

// 校验当前步骤字段的函数，参数为当前步骤编号（比如要跳转到step2，当前是step1）
function validateCurrentStep(currentStep) {
    switch(currentStep) {
        case 1:
            const userName = document.querySelector("#user_name").value; // 直接通过ID获取字段，无需依赖form
            if (!userName.trim()) {
                alert("Name must be filled out");
                return false;
            }
            break;
        // 后续步骤的校验逻辑可以在这里扩展
        case 2:
            const email = document.querySelector("#user_email").value;
            if (!email.trim()) {
                alert("Email must be filled out");
                return false;
            }
            break;
    }
    return true;
}

// 步骤跳转函数（保留原逻辑不变）
const navigateToFormStep = (stepNumber) => {
    document.querySelectorAll(".form-step").forEach((formStepElement) => {
        formStepElement.classList.add("d-none");
    });
    document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {
        formStepHeader.classList.add("form-stepper-unfinished");
        formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");
    });
    document.querySelector("#step-" + stepNumber).classList.remove("d-none");
    const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
    formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-completed");
    formStepCircle.classList.add("form-stepper-active");
    for (let index = 0; index < stepNumber; index++) {
        const formStepCircle = document.querySelector('li[step="' + index + '"]');
        if (formStepCircle) {
            formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-active");
            formStepCircle.classList.add("form-stepper-completed");
        }
    }
};

// 按钮点击事件：整合校验与跳转
document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
    formNavigationBtn.addEventListener("click", () => {
        const targetStep = parseInt(formNavigationBtn.getAttribute("step_number"));
        const currentStep = targetStep - 1; // 假设跳转按钮的step_number是目标步骤，当前步骤为目标-1
        // 先执行校验，通过后再跳转
        if (validateCurrentStep(currentStep)) {
            navigateToFormStep(targetStep);
        }
    });
});

3. 关键优化点说明

• 移除冗余的onclick绑定，避免事件冲突
• 校验函数通过步骤编号区分不同字段的校验逻辑，扩展性更强
• 直接通过元素ID获取字段值，不再依赖document.forms，符合无表单的需求
• 跳转逻辑仅在校验通过后执行，确保数据合法性

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