O problema é que o Validator cria uma label
com a mensagem de erro após o input
a ser validado, e como você colocou uma div
com o ícone do calendário após o input, a label criada irá ficar entre o input e a div.
Uma forma de resolver isso é mover as label's criadas para após a div do ícone do calendário usando a função da opção invalidHandler
do Validator. Essa função é disparada sempre que um campo é identificado como inválido.
Na função você pega todos os elementos com a classe .datetimepicker-input
e verifica se após eles há um label.error
, e se houver, você move essa label para após a div seguinte (que é a div do ícone do calendário) usando .insertAfter()
. Só que a função do invalidHandler
é disparada antes do plugin criar as label's de erro, por isso é preciso usar um setTimeout
para dar um pequeno delay antes de executar o código.
Coloque o CSS para que essas label's fiquem invisíveis e que não ocupem espaço de início:
.datetimepicker label.error{
position: absolute;
visibility: hidden;
}
Veja um exemplo:
$(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>
label
para exibir a mensagem de erro não é muito adequado ao meu ver. acredito que ele faça isso pois como tem umfor
na label ao clicar nela o focus vai para o input correspondente, mesmo assim não concordo, mas isso não tem a ver com o problema tb rss