多步骤表单第4步必填验证移除需求及代码修改求助

修改后的jQuery代码 #

$(document).ready(function() {
  var currentStep = 0;
  var steps = $('.step');
  
  // 显示第一步
  $(steps[currentStep]).addClass('activee'); 
  
  // 下一步按钮点击事件
  $('.next').click(function() {  
    if (validateStep(currentStep)) {
      $(steps[currentStep]).removeClass('activee');
      currentStep++;
      $(steps[currentStep]).addClass('activee');
    }
  });
  
  // 上一步按钮点击事件
  $('.prev').click(function() {
    $(steps[currentStep]).removeClass('activee');
    currentStep--;
    $(steps[currentStep]).addClass('activee');
  });
  
  // 提交按钮点击事件
  $('.submit').click(function() {
    if (validateStep(currentStep)) {
      alert('表单提交成功！');
    }
  });
    
  // 步骤验证函数
  function validateStep(step) {
    // 第4步（索引为3）跳过验证
    if (step === 3) {
      return true;
    }
    
    var radios = $(steps[step]).find('input[type="radio"]'); 
    var isChecked = radios.is(':checked');
    
    if (!isChecked) {
      alert('请至少选择一个选项');
      return false;
    }
    
    return true;
  }
});  

修改后的HTML（含第4步输入字段示例） #

<div class="step">
  步骤1：选择选项
  <input type="radio" name="step1" value="opt1"> 选项1
  <input type="radio" name="step1" value="opt2"> 选项2
  <button class="prev btncoss0" disabled>Previous</button>
  <button class="next btncoss">Next</button>
</div>

<div class="step">
  步骤2：选择选项
  <input type="radio" name="step2" value="opt1"> 选项1
  <input type="radio" name="step2" value="opt2"> 选项2
  <button class="prev btncoss0">Previous</button>
  <button class="next btncoss">Next</button>
</div>

<div class="step">
  步骤3：选择选项
  <input type="radio" name="step3" value="opt1"> 选项1
  <input type="radio" name="step3" value="opt2"> 选项2
  <button class="prev btncoss0">Previous</button>
  <button class="next btncoss">Next</button>
</div>

<div class="step">
  步骤4：填写补充信息（非必填）
  <input type="text" placeholder="请输入补充内容">
  <button class="prev btncoss0">Previous</button>
  <button class="submit btncoss">Submit</button>
</div>

关键修改说明 #

• 移除第4步验证：在validateStep函数开头添加判断，当步骤索引为3（对应第4步）时直接返回true，跳过单选框验证逻辑。
• 修正原代码错误：
  1. 原代码误将单选框的选中判断写成:focus（获取焦点），改为:checked（已选中）。
  2. 变量名错误：原代码中定义checked但判断时用了未定义的focus，统一修正为isChecked。
• 优化HTML体验：给第一步的上一步按钮添加disabled属性，避免无效点击；将第4步的next按钮改为submit按钮，符合流程逻辑。

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