如何实现填写完Step1表单后自动跳转Step2并校验必填项？

我有一个分两步填写的表单，需求如下：

1. 填写完Step1的所有字段后，自动打开Step2；
2. Step1的字段必须全部填写，否则无法进入Step2。
   我正在学习JavaScript，请问如何实现该功能？以下是现有代码：

<style>
output {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.125s;
    overflow: hidden;
}

div {
    min-height: 0;
}

.ocultar_check {
    display: none;
}

[type="radio"]:checked+output {
    grid-template-rows: 1fr;
}

fieldset {
    border: 0;
    display: grid;
    gap: 0.2rem;
    max-width: 100%;
    margin-inline: auto;
    padding: 1rem;
}

.pasos {
    padding: 0.5rem;
    color: #1E1E1E;
    font-weight: 600;
    background: #dddddd;
    cursor: pointer;
    transition: background 0.125s;
    border-radius: 0.2rem;

    &:hover {
        background: oklch(0.8 0 0.1);
    }
}

.error-border {
    border: 1px solid red;
}
</style>

<fieldset id="accordion">
    <label for="1" class="pasos">Step1</label>
    <input class="ocultar_check" type="radio" name="toggle" id="1" value="1" checked>
    <output>
        <div>
            <input placeholder="name" id="name" name="" required />
            <input placeholder="last name" id="last_name" name="" required />
            <input placeholder="phone" id="phone" name="" required />
        </div>
    </output>
    <label for="2" class="pasos">Step2</label>
    <input class="ocultar_check" type="radio" name="toggle" id="2" value="2">
    <output>
        <div>
            <input placeholder="city" id="city" name="" required />
        </div>
    </output>
</fieldset>

实现思路与代码修改 #

要满足需求，我们需要通过JavaScript实现实时校验Step1字段和控制Step2的切换权限，以下是具体实现方案：

核心逻辑说明

1. 实时校验：监听Step1所有输入框的输入事件，每次输入后检查是否全部填写完成
2. 自动切换：当Step1所有字段都填写完成时，自动选中Step2的单选按钮，触发CSS的展开效果
3. 拦截非法切换：点击Step2标签时先校验Step1字段，未填写完整则阻止切换并给空字段添加红色边框提示
4. 优化体验：输入框获得焦点时自动移除错误边框，避免持续干扰用户

修改后的完整代码

<style>
output {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.125s;
    overflow: hidden;
}

div {
    min-height: 0;
}

.ocultar_check {
    display: none;
}

[type="radio"]:checked+output {
    grid-template-rows: 1fr;
}

fieldset {
    border: 0;
    display: grid;
    gap: 0.2rem;
    max-width: 100%;
    margin-inline: auto;
    padding: 1rem;
}

.pasos {
    padding: 0.5rem;
    color: #1E1E1E;
    font-weight: 600;
    background: #dddddd;
    cursor: pointer;
    transition: background 0.125s;
    border-radius: 0.2rem;

    &:hover {
        background: oklch(0.8 0 0.1);
    }
}

.error-border {
    border: 1px solid red;
}
</style>

<fieldset id="accordion">
    <label for="1" class="pasos">Step1</label>
    <input class="ocultar_check" type="radio" name="toggle" id="1" value="1" checked>
    <output>
        <div>
            <input placeholder="name" id="name" name="" required />
            <input placeholder="last name" id="last_name" name="" required />
            <input placeholder="phone" id="phone" name="" required />
        </div>
    </output>
    <label for="2" class="pasos">Step2</label>
    <input class="ocultar_check" type="radio" name="toggle" id="2" value="2">
    <output>
        <div>
            <input placeholder="city" id="city" name="" required />
        </div>
    </output>
</fieldset>

<script>
// 获取关键DOM元素
const step1Inputs = document.querySelectorAll('#accordion output:first-child input');
const step2Radio = document.getElementById('2');
const step2Label = document.querySelector('label[for="2"]');

// 校验Step1所有字段是否已填写完整
function validateStep1() {
    return Array.from(step1Inputs).every(input => input.value.trim() !== '');
}

// 给Step1输入框添加实时监听
step1Inputs.forEach(input => {
    input.addEventListener('input', () => {
        if (validateStep1()) {
            step2Radio.checked = true;
        }
    });
    
    // 输入框获得焦点时移除错误边框
    input.addEventListener('focus', () => {
        input.classList.remove('error-border');
    });
});

// 拦截Step2标签的点击事件，校验不通过则阻止切换
step2Label.addEventListener('click', (e) => {
    const isStep1Valid = validateStep1();
    if (!isStep1Valid) {
        e.preventDefault();
        // 给空输入框添加错误边框提示
        step1Inputs.forEach(input => {
            if (input.value.trim() === '') {
                input.classList.add('error-border');
            }
        });
    }
});
</script>

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