WordPress中Radio按钮的jQuery验证失效问题求助

我在WordPress中开发基于Radio按钮的五星评分功能，当前验证机制无法正常工作。需求是：当访客未选择任何有效评分（即保留默认的"未评分"选项）时，触发验证报错。

现有代码 #

JavaScript代码

jQuery(document).on('click', '#sv_form', function() {

  var timeliness = jQuery('input[name="timeliness"]:checked').value;
  //var timeliness = jQuery('input[name="timeliness"]:checked').val(); 

  if (timeliness === '') {

    jQuery('#valida_error_message').text('*All above Fields are Required');

  } else {

    jQuery.ajax({
      url: ajax_url,
      type: "POST",
      dataType: "JSON",
      //cache: false,
      data: {
        'action': 'vendor_survey_form',
        'timeliness': timeliness,
      },
      success: function(data) {

        if (data.message) {
          jQuery('body #message').html('Message sent successfully');
          jQuery("form").trigger("reset");

        } else {
          jQuery('#survey_error_message').text(data);
          jQuery("form").trigger("reset");
        }

      },
      error: function(errorThrown) {
        console.log(errorThrown);
      }

    });
  }

})

HTML代码

<fieldset class="timeliness">
  <!-- id="no-rate" -->
  <input type="radio" id="timeliness" class="input-no-rate" name="timeliness" value="0" checked="" aria-label="No timeliness.">

  <input type="radio" id="rate1" name="timeliness" value="1" required>
  <label for="rate1">1 tstar</label>

  <input type="radio" id="rate2" name="timeliness" value="2" required>
  <label for="rate2">2 tstar</label>

  <input type="radio" id="rate3" name="timeliness" value="3" required>
  <label for="rate3">3 tstar</label>

  <input type="radio" id="rate4" name="timeliness" value="4">
  <label for="rate4">4 tstar</label>

  <input type="radio" id="rate5" name="timeliness" value="5" required>
  <label for="rate5">5 tstar</label>

  <span class="focus-ring"></span>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

问题分析及修复方案 #

核心问题点

1. jQuery取值错误：你用了jQuery('input[name="timeliness"]:checked').value，这是原生DOM的写法，但jQuery对象必须用.val()方法取值，注释里的写法才是正确的。
2. 验证逻辑错误：默认选中的选项值是0，但你判断的是timeliness === ''，这个条件永远不会触发，因为0不等于空字符串。
3. 原生required属性无效：因为默认有checked的选项，浏览器会认为已经有选择，所以给其他按钮加required完全没用。

修复后的代码

修正后的JavaScript

jQuery(document).on('click', '#sv_form', function(e) {
  // 阻止默认点击跳转/表单提交行为
  e.preventDefault();

  // 使用jQuery正确的取值方法
  var timeliness = jQuery('input[name="timeliness"]:checked').val(); 

  // 判断是否选择了默认的未评分选项
  if (timeliness === "0") {
    jQuery('#valida_error_message').text('*请选择一个评分');
    return; // 终止后续AJAX请求
  } 

  // 验证通过，发送AJAX请求
  jQuery.ajax({
    url: ajax_url,
    type: "POST",
    dataType: "JSON",
    data: {
      'action': 'vendor_survey_form',
      'timeliness': timeliness,
    },
    success: function(data) {
      if (data.message) {
        jQuery('body #message').html('评分提交成功');
        jQuery("form").trigger("reset");
        // 重置后默认选中未评分选项（可选）
        jQuery('input[name="timeliness"][value="0"]').prop('checked', true);
      } else {
        jQuery('#survey_error_message').text(data);
        jQuery("form").trigger("reset");
      }
    },
    error: function(errorThrown) {
      console.log(errorThrown);
    }
  });
})

修正后的HTML

<fieldset class="timeliness">
  <input type="radio" id="timeliness" class="input-no-rate" name="timeliness" value="0" checked aria-label="未评分">

  <input type="radio" id="rate1" name="timeliness" value="1">
  <label for="rate1">1星</label>

  <input type="radio" id="rate2" name="timeliness" value="2">
  <label for="rate2">2星</label>

  <input type="radio" id="rate3" name="timeliness" value="3">
  <label for="rate3">3星</label>

  <input type="radio" id="rate4" name="timeliness" value="4">
  <label for="rate4">4星</label>

  <input type="radio" id="rate5" name="timeliness" value="5">
  <label for="rate5">5星</label>

  <span class="focus-ring"></span>
</fieldset>
<!-- 确保页面存在错误提示元素 -->
<div id="valida_error_message" style="color:red;"></div>
<div id="survey_error_message" style="color:red;"></div>
<div id="message" style="color:green;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

额外优化建议

• 建议把按钮的click事件改成表单的submit事件，更符合表单交互逻辑：将jQuery(document).on('click', '#sv_form', function(e)改为jQuery(document).on('submit', '#sv_form', function(e)（前提是#sv_form是<form>元素）。
• 可以给input-no-rate类添加隐藏样式，让用户更直观地感知需要主动选择星级。

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