错误放置在Jquery验证插件的select标签顶部

时间:2018-12-05 12:02:16

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

enter image description here

使用jquery验证开始,无法将错误放置在所有其他select标记的select标记之后,而select标记仅在select标记的字段之后那样工作。如何解决。

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

1 个答案:

答案 0 :(得分:0)

在select2-container类解决后添加错误类