【问题标题】:Error placement on top of select tag for Jquery validation plugin错误放置在 Jquery 验证插件的选择标记顶部
【发布时间】: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 代码

标签: javascript jquery html css ruby-on-rails


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-12-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-23
    • 1970-01-01
    • 1970-01-01
    • 2011-08-04
    相关资源
    最近更新 更多