jQuery - 如何将验证相同的输入名称添加到规则方法中？

Question

在此之前，我很抱歉关于此的基本问题。 但是，我真的被这个问题困住了。 下面的代码是我迄今为止尝试过的代码，但它不起作用。

<form id="order_form">
  <input type="text" name="order_amount" id="order_amount"/>
  <div class="form-group">
    <input type="radio" value="60" name="timer-radio"/>
    <input type="radio" value="90" name="timer-radio"/>
    <input type="radio" value="120" name="timer-radio"/>
  </div>
  <input type="submit" value="Submit"/>
</form>
<script>

var validator = $('#order_form').validate({
  rules: {
    order_amount: {
      required: true,
      min: 1,
      max: currentBalance,
    }
  },
  messages: {
    order_amount: {
      required: 'Order Amount Required',
    },
    timer-radio: {
      number: true
    },
  },
  errorPlacement: function (error, element) {
    error.insertAfter(element);
  },
  highlight: function (element) {
    $(element).addClass('error');
  },
  submitHandler: handleSubmitOrder,
});

function handleSubmitOrder(_, event) {
  event.preventDefault();
}
</script>

那么，如何为无线电输入添加规则？

Answer 1

请记住避免-在使用 jQuery Validate 时输入名称，即timer-radio - 使用timer_radio 。 否则对于无线电组，您可以只指定组中输入的名称。 另请参阅在所有单选按钮输入之后放置错误容器是多么容易。

为了避免额外的问题，你的提交按钮不应该有名称submit而是别的东西，以防你将在验证器提交处理程序中使用form.submit()成功。

 function handleSubmitOrder(e) { e.preventDefault(); } $(function(){ var validator = $('#order_form').validate({ rules: { order_amount: { required: true, min: 1, max: 100 }, timer_radio: { required: true } }, messages: { order_amount: { required: 'Order Amount Required' }, timer_radio: { required: 'Selection Required' }, }, errorPlacement: function (error, element) { var group = element.attr('name') == 'timer_radio'?element.siblings().last():element; error.insertAfter(group); }, highlight: function (element) { $(element).addClass('error'); }, submitHandler: handleSubmitOrder }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> <form id="order_form"> <input type="text" name="order_amount" id="order_amount"/> <div class="form-group"> <input type="radio" value="60" name="timer_radio"/> <input type="radio" value="90" name="timer_radio"/> <input type="radio" value="120" name="timer_radio"/> </div> <input type="submit" value="Submit"/> </form>