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

Before this, I'm so sorry for the basic question on this. But, I really got stuck with this. Below code is what I have tried so far but it's not working.

<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>

So, How can I add rules for radio input?

CodePudding user response：

Keep in mind to avoid - in the input name i.e timer-radio when using jQuery Validate - use timer_radio. Otherwise for radio group you can just specify the name of the inputs of in the group. See also how easily you can place the error container after all the radio button inputs.

To avoid extra problems, your submit button shouldn't have name submit but something else, in case you will use form.submit() in validator submit handler on success.

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>