
Запущено с помощью проверки jquery, невозможно поместить ошибку после тега 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-код, который на самом деле является встроенным рубиновым кодом, будет выбирать 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 %>