Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

meyer

Conflito: JQuery Validation + Bootstrap 3 Tooltip

Por , em Javascript

Recommended Posts

meyer    0

meyer
Postado

Olá pessoal!

Estou com um conflito entre o JQuery Validation e o Bootstrap Tooltip, de forma que quando envio o formulário vazio e o Validation entra em ação, e o Tooltip aparece com o focus no input, a cada vez que o input perde o foco e recebe novamente, a mensagem de validação é repetida uma linha abaixo, indefinidamente. Por favor, gostaria de alguma dica, pois não estou conseguindo resolver este conflito!

Obrigado.

Segue o código abaixo:

 

HTML:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Cadastrar usuário</title>
    <meta charset='utf-8' />
    <script src='https://code.jquery.com/jquery-3.2.1.min.js' integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=' crossorigin='anonymous'></script>
    <script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js'></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div class='container'>
      <br />
      <div class='panel panel-primary'>
        <div class='panel-heading'>
          <h4 class='panel-title'>Cadastrar usuário</h4>
        </div>
        <div class='panel-body'>
          <form  action='' method='post' class='form-horizontal' id='form-cadastro'>
            <div class='form-group'>
              <div class='col-md-12'>
                <label>Nome completo</label>
                <input type='text' class='form-control informa' id='nome' name='nome' data-toggle='tooltip' title='Mínimo 6 caracteres' minlength='6' required />
              </div>
            </div>
            <div class='form-group'>
              <div class='col-md-12'>
                <label>Nome de usuário</label>
                <input type='text' class='form-control informa' id='login' name='login' data-toggle='tooltip' title='Mínimo 4 caracteres' minlength='4' required />
              </div>
            </div>
            <div class='form-group'>
              <div class='col-md-12'>
                <label>Criar uma senha</label>
                <input type='password' class='form-control informa' id='senha' name='senha' data-toggle='tooltip' title='Mínimo 4 caracteres' minlength='4' required />
              </div>
            </div>
            <div class='form-group'>
              <div class='col-md-12'>
                <label>Confirme a senha</label>
                <input type='password' class='form-control' id='confirma' name='confirma' required />
              </div>
            </div>
            <div class='text-right'>
              <a href='inicio.php'><button type='button' class='btn btn-default' id='botao'>Cancelar</button></a>
              <input type='submit' name='cadastrar' class='btn btn-primary' value='Criar cadastro' />
            </div>
          </form>
        </div>
      </div>
    </div>
    <br />
    <script type='text/javascript'>
      $.validator.setDefaults();
      $(document).ready(function () {

        //Tooltip
        $('[data-toggle=\'tooltip\']').tooltip({animation: true, placement: 'bottom', trigger: 'focus'});

        //Validator
        $('#form-cadastro').validate({
          rules: {
            confirma: {
              equalTo: '#senha'
            }
          },
          messages: {

            nome: 'Este campo é obrigatório.',
            login: 'Por favor, digite um nome de usuário válido.',
            senha: 'Por favor, digite uma senha.',
            confirma: 'Por favor, repita a senha.'
          },
          errorElement: 'em',
          errorPlacement: function (error, element) {
            // Add the `help-block` class to the error element
            error.addClass('help-block');
            error.insertAfter(element);
          },
          highlight: function (element, errorClass, validClass) {
            $(element).parents('.col-md-12').addClass('has-error').removeClass('has-success');
          },
          unhighlight: function (element, errorClass, validClass) {
            $(element).parents('.col-md-12').addClass('has-success').removeClass('has-error');
          }
        });
      });
    </script>
  </body>
</html>

 

CSS:

 

/* Tooltip */
.informa + .tooltip > .tooltip-inner {
  background-color: #222;
  color: #fff;
  border: 1px solid #222;
  padding-top: 0px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

 

.informa + .tooltip.bottom > .tooltip-arrow {
  border-bottom: 5px solid #222;
}

 

.tooltip {
  left: 15px !important;
}


/* Error message */

.error {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-style: inherit;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

eu vi esse problema no stack e respondi la, acho que isso te ajuda: 

errorPlacement: function (error, element) {
  // Add the `help-block` class to the error element
  $('#form-cadastro #'+element.attr('name')+'-error').remove();

  error.addClass('help-block');
  error.insertAfter(element);
},

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

esse trecho de código não te trouxe nada no onsole?  

console.log($('#form-cadastro #'+element.attr('name')+'-error'));

eu cheguei a executar o código e funcionou, mas eu não salvei ele, mas a ideia foi pegar os ids gerados no momento do erro e deletar eles sempre quando acontecer um novo erro, logo e seguida cria de novo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

meyer    0

meyer
Postado

Muito obrigado, Douglas! O seu código não deu certo comigo, mas adaptei-o conforme a sua ideia e funcionou... conflito resolvido!

 

Minha solução foi:

  

errorPlacement: function (error, element) {
  $('[data-toggle=\'tooltip\']').removeAttr('name');
  error.addClass('help-block');
  error.insertAfter(element);
},

 

Gratidão e abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • ILR master
      Cronômetro regressivo php
      Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • clovis.sardinha
      Como colocar um spinner do bootstrap antes do carregamento da query com o codeigniter.
      Por clovis.sardinha
      Como fazer para colocar um spinner antes de carregar os dados do bd? Eu clico no link e entra na função do controle e só vai para a página da views quando já está pronto a query. Vi uns exemplos de colocação de spinner, mas se a página ainda não apareceu como faço? Vou anexar a função que chama a página para facilitar. 
      public function inativos()  {     $session = \Config\Services::session();     $pager = \Config\Services::pager();     $usuarios=$this->usuarios->getInativos();//faz a query no bd.     $dados=[         'usuarios'=>$usuarios,         'pager'=>$this->usuarios->pager,     ];     echo view('Admin/Relatorios/listaInativos',$dados); }   
    • Danilo - Jesus voltará!
      Pegar class e id gerado dinamicamente em requisição ajax (javascript) e php
      Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • joeythai
      combobox repetindo registros
      Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito