3

Bom dia pessoal,

Estou com um problema no meu validate() do form com o datetimepicker em um modal, a mensagem está aparecendo a direita do input e antes do botão, preciso que ela se desloque para baixo do input, como normalmente é, segue código abaixo:

<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>
    </form>
</div>

<script id="Js" type="text/javascript">
$(document).ready(function() {
    $("#cadAcesso").validate({
    rules: {
    "inputDtEntrada": {
    required: true
    }
    },

    messages: {
    "inputDtEntrada": {
    required: 'Campo obrigatório'
    }
    }
    });
});
</script> 

Abaixo segue print do problema:

inserir a descrição da imagem aqui

4
  • isso é bootstrap 3 ou 4? Qual o link do plugin desse validador que vc usou? Só com esse código não da para simular o seu problema
    – hugocsl
    Commented 3/12/2019 às 13:31
  • To usando o bootstrap 4 o plugin é o tempusdominus.github.io/bootstrap-4 sobre o validador é do próprio form do html. Obrigado. Commented 3/12/2019 às 13:42
  • cara não consegui simular o campo invalido, mas provavelmente o que acontece é que o bootstrap costuma colocar alguns estilos no elementos por padrão, então essa label com a mensagem de erro deve estar recebendo algum css do bootstrap. Na verdade usar o elemento label para exibir a mensagem de erro não é muito adequado ao meu ver. acredito que ele faça isso pois como tem um for 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
    – hugocsl
    Commented 3/12/2019 às 14:14
  • Pois é Hugo, não sei porque por default o bootstrap ou o próprio html insere o label após o input e a direita não abaixo, não estou conseguindo resolver nem encontrar nada na web sobre. Eu vi que algo assim da pra ser feito ( errorPlacement: function(error, element) { error.appendTo( element.parents("div").next("div") ); },) mas ele joga o erro todo errado nos outros input =/ Commented 3/12/2019 às 14:25

1 Resposta 1

1

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>

7
  • Sam no meu ele pulou para após o botão, veja na imagem que anexei a minha pergunta original por favor. Existe a possibilidade de dar um próximo next? Não sei... Commented 3/12/2019 às 18:25
  • Alterei só uma linha: if(erros.length) erros.css("flex-basis", "100%").insertAfter(erros.next("div")); Veja se funciona agora.
    – Sam
    Commented 3/12/2019 às 19:58
  • Sam funcionou perfeitamente, você é o cara, somente três pontos a destacar. O primeiro é que ao dar o erro de obrigatoriedade o campo e botão deixaram de serem arredondados nas pontas. O segundo é que ao clicar no botão para emissão do erro a mensagem aparece bem rápidamente dentro do input e logo depois abaixo dele. O terceiro ponto gostaria de saber o que significa(css("flex-basis")) se puder me informar gostaria de saber por favor. Commented 3/12/2019 às 20:13
  • Cara, realmente é estranho os cantos do botão deixarem de ser arrendondados. Vou tentar solucionar isso e a questão de aparecer rapidamente dentro do input, aí depois eu explico o lance do flex-basis.
    – Sam
    Commented 3/12/2019 às 20:31
  • 1
    Boa Sam... Agora ta perfeito... muito obrigado mais uma vez, me colocaram numa fogueira aqui na empresa pra desenvolver um sistema, mas graças a Deus temos pessoas iguais a você pra nos ajudar aqui no Stack haha Commented 4/12/2019 às 12:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .