单选框验证警告生效但AJAX提交仍执行的解决办法咨询

你的问题出在：原生表单的onsubmit绑定了验证逻辑，但jQuery的submit事件处理函数并没有检查验证结果，直接执行AJAX请求，导致验证不通过时AJAX仍会提交。

修复方案 #

统一在jQuery的表单提交事件中先执行验证，只有验证通过时才发起AJAX请求，同时移除重复的原生事件绑定，避免冲突。

修改后的完整代码 #

JavaScript部分

function validateForm() {
  var validConsumo = validateConsumo();
  return validConsumo;
}

function validateConsumo() {
  // 改用querySelectorAll获取name为select的单选框，避免id冲突问题
  var selects = document.querySelectorAll('#filter input[name="select"]'),
      errorSpan = document.getElementById("error_select"),
      isChecked = false;
  errorSpan.innerHTML = "";

  for (var i = 0; i < selects.length; i++) {
    if (selects[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    errorSpan.innerHTML = "* 必须选择一个选项";
    return false;
  }

  return true;
}

jQuery(function($) {
  $('#filter').submit(function(e) {
    // 先执行验证，不通过则阻止后续操作
    if (!validateForm()) {
      return false;
    }

    var filter = $(this);
    $.ajax({
      url: filter.attr('action'),
      data: filter.serialize(),
      type: filter.attr('method'),
      beforeSend: function() {
        filter.find('button').text('Filtering...');
      },
      success: function(data) {
        filter.find('button').text('Filter');
        $('#response').html(data);
      }
    });
    // 阻止表单默认提交行为
    return false;
  });
});

HTML部分（无需改动）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
  <label class="toggler-wrapper style-19">
    <input type="radio" name="select" onchange="changeThis1(this)">
    <div class="toggler-slider">
      <div class="toggler-knob"></div>
    </div>
  </label>
  <div class="my"><strong>1</strong></div>

  <label class="toggler-wrapper style-19">
    <input type="radio" name="select" onchange="changeThis2(this)">
    <div class="toggler-slider">
      <div class="toggler-knob"></div>
    </div>
  </label>
  <div class="my"><strong>2</strong></div>
  <br>

  <span id="error_select" class="error"></span>

  <div class="buttonfiltra" id="buttonfiltra">
    <button id="link-ida">Filter</button>
    <input type="hidden" value="valuefilter" class="submit" id="link-id" name="action">
  </div>
</form>

关键改动说明 #

1. 移除原生onsubmit绑定：避免和jQuery的submit事件产生冲突，统一用jQuery处理表单提交逻辑。
2. 在jQuery提交事件中加入验证判断：调用validateForm()，只有返回true时才执行AJAX请求。
3. 优化单选框选择逻辑：用querySelectorAll替代原有的document.getElementById("filter").select，避免因表单内存在id="select"的元素导致的选择错误。

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