错误放置在 Jquery 验证插件的选择标记顶部

Posted 2023-05-09

【中文标题】错误放置在 Jquery 验证插件的选择标记顶部

【英文标题】：Error placement on top of select tag for Jquery validation plugin

【发布时间】：2019-05-06 23:56:10

【问题描述】：

开始使用 jquery 验证，无法将错误放置在选择标记之后，因为它放置在字段之后，仅选择标记的工作方式是这样的。如何解决。

javascript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $('#issue_form').validate(
    errorElement: 'span',
    errorClass: 'desc',
    ignore: [],
    rules: 
      "issue[item]":
        required: true
      ,
      "issue[odometer_reading]":
        required: true
      ,
      "issue[vehicle_id]":
        required: true
      
    ,

    messages: 
      "issue[vehicle_id]":  
        required: "Vehicle Selection is required"
      ,
      "issue[item]":  
        required: "This Field is required"
      ,
      "issue[odometer_reading]":  
        required: "Odometer Reading is required"
      
    ,
    highlight: function(element) 
      $(element).closest('.col-sm-8').removeClass('success').addClass('has-error');
    ,
    unhighlight: function(element) 
      $(element).closest('.col-sm-8').removeClass('has-error')
    ,
    errorPlacement: function (error, element) 
      var elem = $(element);
      error.insertAfter(element);
      )
<script>

我的 html 代码实际上是嵌入的 ruby​​ 代码，form.select 将像在 HTML 中一样被选择

<%= form_with(model: issue, local: true,id:"issue_form") do |form| %>

  <div class = "form-horizontal">
    <div class="form-group required">
      <label class=" col-sm-3 control-label" for="textInput2-modal-markup">Vehicle</label>
      <div class="col-sm-8">
        <%= form.select :vehicle_id, Vehicle.all.pluck( :registration_num, :id),prompt: "Nothing Selected",class:"inspect_vehicle",id:"issue_vehicle_id"%>
      </div>
    </div>
    <div class="form-group required">
      <label class="col-sm-3 control-label" for="textInput-modal-markup">Issue</label>
      <div class="col-sm-8">
        <%= form.text_field :item ,class:"form-control"%>
      </div>
    </div>
    <hr>
      <p style="float:right;">
        <%= form.submit "Save",class:"btn btn-primary" %>
      </p>
    </hr>
  </div>
<% end %>

【问题讨论】：

也发布您的html 代码。

@ShubhamBaranwal 发布了我的 HTML 代码

【参考方案1】：

在 select2-container 类解决我的问题后添加错误类