多步骤表单中点击分页按钮前验证jQuery自动完成输入框

一、阻止非法内容跳转的核心修复 #

你当前的问题出在change事件仅在输入框失去焦点时触发，但用户直接点击下一步时，输入框还没失焦，change事件还没执行就完成跳转了。核心解决思路是在下一步按钮的点击事件中添加前置校验：

1. 提前把JSON数据源中的合法选项缓存起来，避免每次校验都重复读取文件
2. 点击下一步时，先获取输入框当前值，对比合法选项列表判断内容是否有效
3. 如果内容非法（不在选项内或为空），直接阻止跳转，同时可添加用户提示（比如输入框标红、显示占位提示）

示例代码：

// 缓存合法选项，页面加载时读取一次JSON
let validOptions = [];
$.getJSON('你的数据文件.json', function(data) {
  // 假设JSON里的选项文本字段是optionText，根据实际结构调整
  validOptions = data.map(item => item.optionText);
});

// 下一步按钮点击事件
$('.next-btn').on('click', function(e) {
  const inputVal = $('#autocomplete-input').val().trim();
  // 校验值是否合法
  if (!inputVal || !validOptions.includes(inputVal)) {
    e.preventDefault(); // 阻止跳转
    // 给用户反馈
    $('#autocomplete-input').addClass('error').attr('placeholder', '请选择合法选项');
    return;
  }
  // 校验通过，执行原跳转逻辑
  goToNextStep();
});

同时可以优化原有的内容校验逻辑，用input事件实时校验，代替仅依赖change事件：

$('#autocomplete-input').on('input', function() {
  const val = $(this).val().trim();
  if (val && !validOptions.includes(val)) {
    $(this).val('').addClass('error');
  } else {
    $(this).removeClass('error');
  }
});

二、是否需要两个脚本？ #

分不分开都可以，取决于项目规模和维护习惯：

• 分开管理：一个管表单步骤切换，一个管自动完成逻辑，职责更清晰，适合大型项目或多人协作场景
• 合并成一个脚本：把自动完成的初始化、校验和表单步骤控制放在同一文件，减少文件数量，维护更便捷，适合中小型项目

没有绝对的优劣，按需选择即可。

三、更高效的实现方式 #

1. 缓存数据源：页面加载时仅读取一次JSON文件，把合法选项存入变量，避免重复请求和解析
2. 统一校验逻辑：把所有步骤的校验逻辑封装成一个函数，下一步按钮点击时统一调用，避免重复代码
3. 关联自动完成与表单状态：当用户选中自动完成的合法选项时，自动标记当前步骤为“已完成”状态，简化后续校验
4. 可选：用原生JS替代jQuery：如果项目允许，用原生fetch请求JSON、addEventListener绑定事件，减少第三方依赖，提升页面性能

统一校验的示例：

function validateCurrentStep() {
  const activeStep = $('.step.active');
  const autocompleteInput = activeStep.find('#autocomplete-input');
  
  // 校验自动完成输入框
  if (autocompleteInput.length) {
    const val = autocompleteInput.val().trim();
    return val && validOptions.includes(val);
  }
  
  // 其他步骤的校验逻辑可在这里扩展
  return true;
}

$('.next-btn').on('click', function(e) {
  if (!validateCurrentStep()) {
    e.preventDefault();
    alert('请填写合法内容');
    return;
  }
  // 执行跳转逻辑
});

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