jQuery - 如何将验证相同的输入名称添加到规则方法中？ [复制]答案

【问题标题】：jQuery - How to added validate same input name into rules methods? [duplicate]jQuery - 如何将验证相同的输入名称添加到规则方法中？ [复制]
【发布时间】：2021-12-10 05:00:37
【问题描述】：

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

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

那么，如何为单选输入添加规则？

【问题讨论】：

您甚至没有显示任何验证无线电输入的尝试。 “它不起作用” 也不是可接受的问题描述。请参阅帮助部分了解如何编写正确的问题。

标签： jquery jquery-validate

【解决方案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>

【讨论】：

e.preventDefault() 函数有什么用？在这种情况下，没有事件与e 相关联。其次，作为内部submitHandler 函数的一部分，插件已经阻止了默认提交事件。我知道 OP 有类似的东西，但如果你要向他展示如何正确地做，请不要重复错误。