The problem is that Validator creates a label with the error message after the input to be validated, and how you put a div with the calendar icon after input, the label created will be between input and div.
One way to resolve this is to move the created labels to after the div of the calendar icon using the option function invalidHandler Validator. This function is triggered whenever a field is identified as invalid.
In the function you take all elements with the class .datetimepicker-input and check if after them there is a label.error, and if there is, you move this label to after the next div (which is the div of the calendar icon) using .insertAfter(). Only that the function of invalidHandler is fired before the plugin creates the error labels, so you need to use a setTimeout to give a small delay before executing the code.
Put CSS so that these labels are invisible and do not take up starting space:
.datetimepicker label.error{
position: absolute;
visibility: hidden;
}
Take an example:
$(document).ready(function() {
$("#cadAcesso").validate({
rules: {
"inputDtEntrada": {
required: true
},
"inputDtSaida": {
required: true
}
},
messages: {
"inputDtEntrada": {
required: 'Campo obrigatório'
},
"inputDtSaida": {
required: 'Campo obrigatório'
}
},
invalidHandler: function() {
setTimeout(function(){
$.each($(".datetimepicker-input"), function(){
var erros = $(this).next("label.error");
if(erros.length){
erros
.css("flex-basis", "100%")
.insertAfter(erros.parent())
.css({
"position" : "relative",
"top" : "-.7rem",
"visibility" : "visible"
});
}
});
}, 1);
}
});
});
.datetimepicker label.error{
position: absolute;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExemplo">
Abrir modal
</button>
<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form enctype="multipart/form-data" id="cadAcesso" method="POST">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 col-lg-3">
<label for="inputDtEntrada_" style="color:red; font-weight: bold;">*</label>
<label for="inputDtEntrada" class="control-label">Dt./Hora Entrada</label>
<div class="control-group form-group input-group date datetimepicker" id="inputDtEntrada_" data-target-input="nearest" title="Data e Hora de Entrada">
<input type="text" class="form-control datetimepicker-input" data-target="#inputDtEntrada_" id="inputDtEntrada" name="inputDtEntrada"/>
<div class="input-group-append" data-target="#inputDtEntrada_" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 col-lg-3">
<label for="inputDtSaida_" style="color:red; font-weight: bold;">*</label>
<label for="inputDtSaida" class="control-label">Dt./Hora Saída</label>
<div class="control-group form-group input-group date datetimepicker" id="inputDtSaida_" data-target-input="nearest" title="Data e Hora de Saida">
<input type="text" class="form-control datetimepicker-input" data-target="#inputDtSaida_" id="inputDtSaida" name="inputDtSaida"/>
<div class="input-group-append" data-target="#inputDtSaida_" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<button>Enviar</button>
</form>
</div>
</div>
</div>
</div>
this is bootstrap 3 or 4? What is the link of the plugin of this validator that you used? Only with this code do not simulate your problem
– hugocsl
To using bootstrap 4 the plugin is https://tempusdominus.github.io/bootstrap-4/ about the validator is from the html form itself. Thank you.
– Leandro Ferreira
guy couldn’t simulate the invalid field, but probably what happens is that bootstrap usually puts some styles in the elements by default, so this label with the error message must be getting some bootstrap css. Actually use the element
labelto display the error message is not very suitable to my view. I believe he does it because as has aforon the label when clicking on it the Focus goes to the corresponding input, even so do not agree, but this has nothing to do with the problem tb rss– hugocsl
Because it’s Hugo, I don’t know why by default the bootstrap or html itself inserts the label after the input and the right not below, I’m not able to solve or find anything on the web about. I saw that something like this gives to be done ( errorPlacement: Function(error, element) { error.appendTo( element.parents("div").next("div") ); },) but it throws the error all wrong in the other input =/
– Leandro Ferreira