表单提交时未填写字段如何自动滚动到对应区域，单选按钮无滚动效果怎么修复

DevOps 小满

2026-9-25

问题原因

你遇到的问题核心原因是：

单选按钮你自己写了自定义校验逻辑，校验不通过时你直接return false阻止了表单默认提交行为，浏览器自带的required属性校验和配套的自动滚动逻辑不会触发
你没给单选的错误场景加手动滚动代码，而其他文本输入框你没做自定义校验拦截，走的是原生表单验证逻辑，所以可以正常滚动

修复方案

修改你的表单提交JS代码，在单选校验不通过时主动触发滚动到对应区域即可，修改后完整代码如下：

$('.sellingFormSave').submit(function(e) {
  $('.form_error').remove();
  var hasError = false;
  var firstErrorEl = null;

  // 单选按钮校验
  if (!$('[name=condition]:checked').val()) {
    $('.condition_radio .wrapper').after('<label class="form_error" style="color:red">Select the condition of the trucks.</label>');
    hasError = true;
    firstErrorEl = $('.condition_radio')[0];
  }

  // 其他字段自定义校验可以按同样格式添加，出错时把firstErrorEl设为第一个出错的元素即可
  if ($('[name=product_id]').val() == '') {
    // 此处可补充product_id对应的错误提示
    // hasError = true;
    // if (!firstErrorEl) firstErrorEl = $('[name=product_id]')[0];
  }

  if (hasError) {
    // 滚动到第一个错误位置
    firstErrorEl.scrollIntoView({
      behavior: 'smooth', // 平滑滚动效果，不需要可删除
      block: 'center' // 滚动后错误区域定位在视口中间，可选值还有start/end
    });
    $('[type=submit]').attr('disabled', false);
    return false;
  }
});