jQuery Validate如何为同name的单选输入框添加rules校验规则

修正方案 #

你当前的代码未在rules节点声明单选组的校验规则，仅配置messages不会触发校验，按以下调整即可生效：

• 在校验规则中添加timer-radio的必填规则，单选组核心校验逻辑为必须选中一项，无需额外配置number规则即可满足常规需求
• 可调整错误插入逻辑，避免错误提示插在第一个单选按钮后影响排版

修正后的完整校验代码如下：

var validator = $('#order_form').validate({
  rules: {
    order_amount: {
      required: true,
      min: 1,
      max: currentBalance,
    },
    // 新增单选组校验规则
    'timer-radio': {
      required: true
    }
  },
  messages: {
    order_amount: {
      required: 'Order Amount Required',
    },
    'timer-radio': {
      required: 'Please select a time duration'
    },
  },
  errorPlacement: function (error, element) {
    // 单选组的错误提示放在整个分组末尾
    if (element.is(':radio')) {
      error.appendTo(element.closest('.form-group'));
    } else {
      error.insertAfter(element);
    }
  },
  highlight: function (element) {
    $(element).addClass('error');
  },
  // 可选：选中单选后自动清除错误样式
  unhighlight: function (element) {
    $(element).removeClass('error');
  },
  submitHandler: handleSubmitOrder,
});

function handleSubmitOrder(_, event) {
  event.preventDefault();
  // 后续业务逻辑
}

如果需要额外防范前端篡改提交非法数值，可以补充范围校验规则：

'timer-radio': {
  required: true,
  number: true,
  min: 60,
  max: 120
}

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