集成JavaScript表单验证与jQuery AJAX提交：确保验证先行

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/submit-data" method="POST" id="filter">
  <label class="toggler-wrapper style-19">
    <input type="radio" name="select" value="1" />
    <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" value="2" />
    <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" style="color: red;"></span>

  <div class="buttonfiltra" id="buttonfiltra">
    <button type="submit" id="link-ida">提交筛选</button>
    <input type="hidden" value="valuefilter" class="submit" id="link-id" name="action" />
  </div>
</form>
<div id="response" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;">
  <!-- AJAX响应将显示在这里 -->
</div>

// 验证单选按钮是否选中
function validateConsumo() {
  // 使用querySelectorAll更精确地选择所有名为'select'的单选按钮
  var selectRadios = document.getElementById("filter").querySelectorAll('input[name="select"]');
  var errorSpan = document.getElementById("error_select");
  var isChecked = false;
  errorSpan.innerHTML = ""; // 清除之前的错误信息

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

  if (!isChecked) {
    errorSpan.innerHTML = "* 请选择一个值"; // 显示错误信息
    return false;
  }
  return true;
}

// 主验证函数（如果需要集成更多验证规则，可以在这里调用其他验证函数）
function validateForm() {
  // 当前只验证单选按钮，如果还有其他字段，可以像下面这样组合验证结果
  // var isValidField1 = validateField1();
  // var isValidField2 = validateField2();
  // return isValidField1 && isValidField2 && validateConsumo();
  return validateConsumo();
}

// jQuery 表单提交事件处理器
$(document).ready(function() {
  // 重要：确保没有其他原生onsubmit绑定会干扰这里的逻辑
  // 例如，移除或注释掉类似 'document.getElementById("filter").onsubmit = validateForm;' 的代码

  $("#filter").on("submit", function (e) {
    e.preventDefault(); // 阻止表单的默认提交行为，这是关键！

    // 执行验证
    if (!validateForm()) {
      console.log("验证失败，AJAX提交已阻止。");
      // 验证失败时，错误信息已在validateConsumo函数中显示
      return; // 如果验证失败，则停止后续操作
    }

    // 验证成功后，执行AJAX请求
    console.log("验证成功，执行AJAX提交。");
    var filterForm = $(this); // 获取当前提交的表单
    $.ajax({
      url: filterForm.attr('action'), // 从表单的action属性获取URL
      data: filterForm.serialize(), // 序列化表单数据
      type: filterForm.attr('method'), // 从表单的method属性获取请求类型 (POST/GET)
      beforeSend: function(xhr) {
        filterForm.find('button').text('提交中...'); // 提交前改变按钮文本，提供用户反馈
      },
      success: function(data) {
        filterForm.find('button').text('提交筛选'); // 恢复按钮文本
        $('#response').html(data); // 将AJAX响应插入到指定元素
        console.log("AJAX请求成功，响应数据已更新。");
        // 可以在此处添加成功后的其他逻辑，例如清空表单或显示成功消息
      },
      error: function(jqXHR, textStatus, errorThrown) {
        filterForm.find('button').text('提交筛选'); // 恢复按钮文本
        console.error("AJAX请求失败: " + textStatus, errorThrown);
        // 可以在此处显示错误消息给用户，例如：$('#error_select').html("提交失败，请重试。");
      }
    });
  });
});