jQuery Slick Slider多步表单实现 校验未通过禁止切换方案咨询

完全可以基于Slick Slider实现包含输入框、单选框、复选框的多步表单，核心是拦截默认切换逻辑，在页面前进时优先校验当前页表单字段，校验不通过直接阻断切换。

核心实现思路 #

• 关闭Slick默认的滑动、点选跳页能力，所有页面切换通过自定义导航按钮触发，避免用户绕过校验直接跳转
• 封装独立的当前页校验方法，遍历当前幻灯片内所有带required标记的字段，区分输入框、单选/复选框做合法性判断
• 仅当用户点击「下一步」向前切换时触发校验，向后返回上一页不做校验，允许用户修改已填内容
• 校验通过后再执行幻灯片切换、同步更新进度条；校验失败直接高亮错误字段，终止切换流程

修改后可直接使用的代码 #

HTML结构补全 #

<!-- 多步表单容器 -->
<form class="multi-step-form">
  <div class="fade">
    <!-- Slide 1 -->
    <div class="step-slide">
      <h1>Age 18</h1>
      <label class="element-animation1 btn btn-lg btn-primary btn-block">
        <input type="radio" name="age18" value="1" required>
        Agree 18 age
      </label>
      <div class="error-tip" style="color:red;display:none;margin-top:10px;">请选择是否年满18岁</div>
    </div>
    <!-- Slide 2 -->
    <div class="step-slide">
      <h1>User name</h1>         
      <input type="text" name="firstname" value="" required placeholder="请输入用户名"/>
      <div class="error-tip" style="color:red;display:none;margin-top:10px;">请输入用户名</div>
    </div>
    <!-- 剩余3步表单按相同结构补充即可 -->
  </div>

  <!-- 进度条 -->
  <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <span class="slider__label">0% completed</span>
  </div>

  <!-- 自定义导航按钮 -->
  <div class="form-nav">
    <button type="button" class="prev-btn" style="display:none;">上一步</button>
    <button type="button" class="next-btn">下一步</button>
    <button type="submit" class="submit-btn" style="display:none;">提交</button>
  </div>
</form>

JS逻辑实现 #

$(document).ready(function() {
  var $slider = $('.fade');
  var $progressBar = $('.progress');
  var $progressBarLabel = $('.slider__label');
  var $prevBtn = $('.prev-btn');
  var $nextBtn = $('.next-btn');
  var $submitBtn = $('.submit-btn');
  var totalSlides = 0;

  // 初始化Slick
  $slider.slick({
    swipe: false,
    dots: false, // 关闭默认点导航，避免跳页绕过校验
    infinite: false,
    speed: 700,
    autoplay: false,
    arrows: false,
    centerMode: false,
    mobileFirst: true,
    focusOnSelect: false,
    accessibility: false,
    draggable: false,
    slidesToShow: 1,
    slidesToScroll: 1
  });

  // 获取总页数
  totalSlides = $slider.slick('getSlick').slideCount;

  // 当前幻灯片校验方法
  function validateCurrentSlide() {
    var isValid = true;
    var $currentSlide = $slider.find('.slick-current');
    // 先隐藏所有错误提示
    $currentSlide.find('.error-tip').hide();
    $currentSlide.find('input').css('border-color', '');

    // 遍历当前页所有必填字段
    $currentSlide.find('input[required]').each(function() {
      var $field = $(this);
      var fieldType = $field.attr('type');
      
      // 文本输入框校验
      if (fieldType === 'text' || fieldType === 'input') {
        if (!$.trim($field.val())) {
          isValid = false;
          $field.css('border-color', 'red');
          $field.siblings('.error-tip').show();
        }
      }

      // 单选、复选框校验：判断同name组是否有选中项
      if (fieldType === 'radio' || fieldType === 'checkbox') {
        var groupName = $field.attr('name');
        if ($currentSlide.find('input[name="'+groupName+'"]:checked').length === 0) {
          isValid = false;
          $field.closest('label').css('border-color', 'red');
          $field.siblings('.error-tip').show();
        }
      }
    });

    return isValid;
  }

  // 切换后更新进度条、按钮状态
  $slider.on('afterChange', function (event, slick, currentSlide) {
    var calc = currentSlide / (totalSlides - 1) * 100;
    $progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
    $progressBarLabel.text(calc + '% completed');

    // 控制按钮显示
    $prevBtn.show();
    $nextBtn.show();
    $submitBtn.hide();
    if (currentSlide === 0) {
      $prevBtn.hide();
    }
    if (currentSlide === totalSlides - 1) {
      $nextBtn.hide();
      $submitBtn.show();
    }
  });

  // 下一步按钮点击事件
  $nextBtn.on('click', function() {
    var currentSlide = $slider.slick('slickCurrentSlide');
    // 校验通过才切换
    if (validateCurrentSlide()) {
      $slider.slick('slickGoTo', currentSlide + 1);
    }
  });

  // 上一步按钮点击事件，无需校验
  $prevBtn.on('click', function() {
    var currentSlide = $slider.slick('slickCurrentSlide');
    $slider.slick('slickGoTo', currentSlide - 1);
  });

  // 表单提交逻辑
  $('.multi-step-form').on('submit', function(e) {
    e.preventDefault();
    if (validateCurrentSlide()) {
      // 此处写最终提交接口逻辑
      alert('表单提交成功');
    }
  });
});

适配说明 #

• 剩余3步表单按照Slide 1、Slide 2的结构补充即可，所有必填字段统一加required属性，不需要额外修改校验逻辑
• 如果需要加下拉选择框、文本域等其他表单元素，只需要在validateCurrentSlide方法里补充对应类型的校验规则即可
• 错误提示样式、按钮样式可以根据自身UI需求调整，核心校验和切换逻辑不需要改动

内容的提问来源于stack exchange，提问作者chatgpt kill stackoverflow