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

Posted 2023-05-07

【中文标题】jQuery - 如何将验证相同的输入名称添加到规则方法中？ [复制]

【英文标题】：jQuery - How to added validate same input name into rules methods? [duplicate]

【发布时间】：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>

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

【问题讨论】：

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

【参考方案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 有类似的东西，但如果你要向他展示如何正确地做，请不要重复错误。