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 时使用 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>

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

jQuery - How to added validate same input name into rules methods?

jquery-validate