https://i.sstatic.net/V6GOt.png
Having an issue with jQuery validation where the error message is not displaying after the select tag like it should. It's working for all other fields except the select tag. Any suggestions on how to correct this?
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>Here is my HTML code, which includes embedded ruby code for form.select:
<%= 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 %>