Ir para conteúdo

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?
    • gersonab
      recuperar url do pdf q foi criado
      Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • 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); }   
    • gersonab
      editar , montar uma imagem online
      Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

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

  Aceito